From a217bded9292de610085a06e6c5811d2f61ed890 Mon Sep 17 00:00:00 2001
From: DaehunGwak <rhkrgns56@naver.com>
Date: Thu, 31 Dec 2020 03:13:39 +0900
Subject: [PATCH] Refactor home component using v-for

Translation json file has 'title' and 'id' fields each quiz.
So refactor using this fields.
---
 quiz-app/src/views/Home.vue | 91 +++++++++----------------------------
 1 file changed, 21 insertions(+), 70 deletions(-)

diff --git a/quiz-app/src/views/Home.vue b/quiz-app/src/views/Home.vue
index 8cff4d55..01ce25cc 100644
--- a/quiz-app/src/views/Home.vue
+++ b/quiz-app/src/views/Home.vue
@@ -1,75 +1,26 @@
 <template>
   <div>
-    <router-link class="link" to="quiz/1"
-      >Lesson 1: Pre-Lecture Quiz</router-link
-    >
-    <router-link to="quiz/2">Lesson 1: Post-Lecture Quiz</router-link>
-    <router-link class="link" to="quiz/3"
-      >Lesson 2: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/4"
-      >Lesson 2: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/5"
-      >Lesson 3: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/6"
-      >Lesson 3: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/7"
-      >Lesson 4: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/8"
-      >Lesson 4: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/9"
-      >Lesson 5: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/10"
-      >Lesson 5: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/11"
-      >Lesson 6: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/12"
-      >Lesson 6: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/13"
-      >Lesson 7: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/14"
-      >Lesson 7: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/15"
-      >Lesson 8: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/16"
-      >Lesson 8: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/17"
-      >Lesson 9: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/18"
-      >Lesson 9: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/19"
-      >Lesson 10: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/20"
-      >Lesson 10: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/21"
-      >Lesson 11: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/22"
-      >Lesson 11: Post-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/23"
-      >Lesson 12: Pre-Lecture Quiz</router-link
-    >
-    <router-link class="link" to="quiz/24"
-      >Lesson 12: Post-Lecture Quiz</router-link
-    >
+    <router-link
+      v-for="q in questions"
+      :key="q.id"
+      :to="`quiz/${q.id}`"
+      class="link"
+    >
+      {{ q.title }}
+    </router-link>
   </div>
 </template>
 
+<script>
+import messages from "@/assets/translations";
+
+export default {
+  name: "Home",
+  computed: {
+    questions() {
+      return this.$t("quizzes");
+    },
+  },
+  i18n: { messages },
+};
+</script>
\ No newline at end of file