From 798cf7d05744397e6be730db5ce5236ab8ea8f0f Mon Sep 17 00:00:00 2001
From: dhao2001 <dhao2001@outlook.com>
Date: Sat, 30 Apr 2022 17:00:41 +0800
Subject: [PATCH] Replace inline style with v-show to control Detect Result's
 visibility.

---
 src/App.vue                     | 6 +++---
 src/components/DetectResult.vue | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a10baad..0e8ed7b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
   <main class="container">
     <image-form @detect-responsed="onDetectResponsed"></image-form>
     <detect-result
-      :visible="detectResult.visible"
+      v-show="detectResultShow"
       :diseaseName="detectResult.diseaseName"
       :imageUrl="detectResult.imageUrl"
       :trustworthiness="detectResult.trustworthiness"
@@ -34,14 +34,14 @@ export default {
         diseaseName: "",
         imageUrl: "",
         trustworthiness: 0.0,
-        visible: false,
       },
+      detectResultShow: false,
     };
   },
   methods: {
     onDetectResponsed(res) {
       this.detectResult = res.data;
-      this.detectResult.visible = true;
+      this.detectResultShow = true;
     },
   },
 };
diff --git a/src/components/DetectResult.vue b/src/components/DetectResult.vue
index c1a44e0..af8d6ce 100644
--- a/src/components/DetectResult.vue
+++ b/src/components/DetectResult.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="py-1 text-center container">
     <div class="row py-lg-3">
-      <div class="col-lg-6 col-md-8 mx-auto" :hidden="!visible">
+      <div class="col-lg-6 col-md-8 mx-auto">
         <h1 class="mb-3 text-center">Detect Result</h1>
         <img
           class="img-thumbnail my-2 w-25"
@@ -23,7 +23,6 @@ export default {
     diseaseName: { type: String },
     imageUrl: { type: String },
     trustworthiness: { type: Number },
-    visible: { tyep: Boolean, default: false },
   },
 };
 </script>