Finish logic of View after detect result is returned.

src/App.vue

@@ -2,13 +2,20 @@
   <header>
     <nav-bar></nav-bar>
   </header>
-  <main>
+  <main class="container">
     <image-form @detect-responsed="onDetectResponsed"></image-form>
+    <detect-result
+      :visible="detectResult.visible"
+      :diseaseName="detectResult.diseaseName"
+      :imageUrl="detectResult.imageUrl"
+      :trustworthiness="detectResult.trustworthiness"
+    ></detect-result>
     <news-album></news-album>
   </main>
 </template>
 
 <script>
+import DetectResult from "./components/DetectResult.vue";
 import ImageForm from "./components/ImageForm.vue";
 import NavBar from "./components/NavBar.vue";
 import NewsAlbum from "./components/NewsAlbum.vue";
@@ -16,13 +23,25 @@ import NewsAlbum from "./components/NewsAlbum.vue";
 export default {
   name: "App",
   components: {
+    DetectResult,
     ImageForm,
     NavBar,
     NewsAlbum,
   },
+  data() {
+    return {
+      detectResult: {
+        diseaseName: "",
+        imageUrl: "",
+        trustworthiness: 0.0,
+        visible: false,
+      },
+    };
+  },
   methods: {
     onDetectResponsed(res) {
-      console.log(res);
+      this.detectResult = res.data;
+      this.detectResult.visible = true;
     },
   },
 };

src/components/DetectResult.vue

@@ -1,18 +1,29 @@
 <template>
-  <div class="col" :hidden="!visible">
+  <section class="py-1 text-center container">
-    <h1 class="mb-3 text-center">Detect Result</h1>
+    <div class="row py-lg-3">
-    <img :src="imageUrl" :alt="'Disease ' + diseaseName" />
+      <div class="col-lg-6 col-md-8 mx-auto" :hidden="!visible">
-    <p>Trustworthiness: {{ trustworthiness }}</p>
+        <h1 class="mb-3 text-center">Detect Result</h1>
-  </div>
+        <img
+          class="img-thumbnail my-2 w-25"
+          :src="imageUrl"
+          :alt="'Disease ' + diseaseName"
+        />
+        <h3 class="my-1">{{ diseaseName }}</h3>
+        <p class="my-1 lead text-muted">
+          Trustworthiness: {{ trustworthiness }}
+        </p>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
 export default {
   props: {
-    visible: { tyep: Boolean, default: false },
     diseaseName: { type: String },
-    trustworthiness: { type: Number },
     imageUrl: { type: String },
+    trustworthiness: { type: Number },
+    visible: { tyep: Boolean, default: false },
   },
 };
 </script>

src/components/ImageForm.vue

@@ -55,7 +55,7 @@ export default {
       };
 
       axios.post(this._uploadImgUrl(), formData, config).then((res) => {
-        console.log(res.status);
+        this.$emit("detect-responsed", res);
       });
     },
   },