From 59d0f6c97dedd1477e95920ed4f78f7dfc7043f0 Mon Sep 17 00:00:00 2001
From: minseokkang <aaaa727@khu.ac.kr>
Date: Wed, 23 Nov 2022 18:15:35 +0900
Subject: [PATCH] 11.23 save success complicated json response in vue.js

---
 src/vite-frontend/src/views/TheHome.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/vite-frontend/src/views/TheHome.vue b/src/vite-frontend/src/views/TheHome.vue
index 31bfdbf..48408fb 100644
--- a/src/vite-frontend/src/views/TheHome.vue
+++ b/src/vite-frontend/src/views/TheHome.vue
@@ -23,8 +23,13 @@
               </li>
             </ul>
           </div>
-          <div v-for="(article, index) in articles" >
-            {{article}} : {{index}}
+
+            <div v-for = "(art,index2) in articles.article">
+              {{ art }} : {{index2}}
+              {{art.slug}}
+
+              !!
+            </div>
 
             <!--
             <div class="article-preview">
@@ -47,7 +52,7 @@
 
           </div>
 
-        </div>
+
 
         <div class="col-md-3">
           <div class="sidebar">
@@ -73,15 +78,17 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import axios from "axios";
 
 export default {
   name: "TheHome",
   setup(){
     const url = import.meta.env.VITE_BASE_URL;
+
     const articles = reactive({
-      article:{},
+      article: {art:{slug: String}},
+      articlesCount: "",
     })
 
     onMounted(() => {
@@ -89,7 +96,10 @@ export default {
             .then(response => {
               console.log(response);
               articles.article = response.data.articles;
-              console.log(articles.article);
+              articles.articlesCount = response.data.articlesCount;
+              articles.article = JSON.parse(JSON.stringify(articles.article));
+              console.log(typeof(articles.article));
+              console.log(articles.articlesCount);
             });
     })