From 06f5654ad15c3d5181282b39818c14fabfe23eb6 Mon Sep 17 00:00:00 2001
From: "CHEN, TAI-LIN" <88068175+NeilChen0812@users.noreply.github.com>
Date: Tue, 22 Aug 2023 20:34:16 +0800
Subject: [PATCH] Update QuestPart.vue

---
 app/src/components/QuestPart.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index d67fc98..166c71f 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -9,8 +9,8 @@ api
   .get('/quests/helloworld')
   .then((res) => {
     console.log(res.data)
-    questData.value = res.data.instruction
-    questData.value = '--Quest Information--'
+    questData.value = res.data
+    questData.value.instruction = '--Quest Information--'
   })
   .catch((err) => {
     questErr.value = err
@@ -19,11 +19,12 @@ api
 
 <template>
   <div class="overflow-auto h-full w-full max-h-full">
-    <h1 id="topic" class="text-text">Try Your First Command</h1>
+    <h1 id="topic" class="text-red-500" v-if="questErr">Failed to get quest infomation</h1>
+    <h1 id="topic" class="text-text" v-else>{{ questData.title }}</h1>
     <hr class="border-text-line border-2 my-2" />
     <div>
       <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
-      <p class="text-text" v-else-if="questData" v-html="questData"></p>
+      <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>