今天打算製作簡易的搜尋功能，會使用到 v-model 和 computed 的概念

• v-model 用來雙向綁定資料
• computed 用來根據輸入自動計算結果

新增輸入框

在 App.vue 中新增一個輸入框，v-model="keyword" 綁定了 input 的值和 keyword 變數。使用者輸入後會更新 keyword，再使用更新後的值過濾出要搜尋的結果。

<input v-model="keyword" type="search" placeholder="請輸入原學校、系所或欲推甄校系" class="search-box" />

用 computed 過濾資料

寫一個 filteredPosts 計算，它會根據 keyword 過濾掉不符合的資料，keyword 改變時，filteredPosts 會自動重新計算。

import { ref, computed } from 'vue'

const keyword = ref('')

const filteredPosts = computed(() => {
  if (!keyword.value) return posts
  return posts.filter((p) => {
    return (
      p.pSchool?.includes(keyword.value) ||
      p.pDep?.includes(keyword.value) ||
      p.pResult1?.includes(keyword.value)
    )
  })
})

過濾完資料後，要再回去小小修改表格的部分，讓它能夠呈現出搜尋後的結果。

<PostTable :posts="filteredPosts" v-if="filteredPosts.length > 0"/>
<p v-else>查無相關結果 QQ</p>

成果展示

輸入原學校後會出現符合的結果

輸入欲推甄校系也會出現符合的資料

小結

• v-model：處理輸入與資料的雙向綁定
• computed：讓資料能即時依照輸入條件過濾