文物列表-搜索功能

src/views/RelicList.vue

@@ -38,6 +38,9 @@
           v-for="(item, idx) in relicData"
           :key="idx"
           class="relic-item"
+          :class="{
+            hide: item.isHide
+          }"
           @click="onClickItem(idx)"
         >
           <img
@@ -84,7 +87,18 @@ const cameraIdx = computed(() => {
 })
 
 const relicData = computed(() => {
-  return store.getters.relicData
+  return store.getters.relicData.map((item) => {
+    if (!keyword.value) {
+      item.isHide = false
+    } else {
+      if (item['名称'].includes(keyword.value)) {
+        item.isHide = false
+      } else {
+        item.isHide = true
+      }
+    }
+    return item
+  })
 })
 
 function getRelicThumbUrl(idx) {
@@ -294,6 +308,9 @@ function onClickItem(idx) {
           overflow: hidden;
         }
       }
+      >.relic-item.hide{
+        display: none;
+      }
     }
   }
 }