Vue多選篩選怎麼寫：用v-model保留勾選的分類

網站作品越多，訪客越難找到想看的類型。若希望同時查看「商店」和「作品集」，可以用Vue的checkbox陣列保存多選結果，再用它篩選卡片；不用為每一種組合寫一個開關。

先讓勾選結果進入陣列

以下適用於已建立的Vue 3單檔元件。第一段放在同一個元件的<script setup>，第二段放在<template>。selected起始只選商店；每個checkbox的value對應作品的type。

import { ref, computed } from 'vue'
const types = ['商店', '作品集', '部落格']
const selected = ref(['商店'])
const sites = [
  { name: '生活選物', type: '商店' },
  { name: '攝影作品', type: '作品集' },
  { name: '旅行筆記', type: '部落格' },
  { name: '手作小店', type: '商店' }
]
const visible = computed(() =>
  sites.filter(site => selected.value.includes(site.type))
)

<label v-for="type in types" :key="type">
  <input type="checkbox" :value="type" v-model="selected">
  {{ type }}
</label>
<p role="status">符合條件：{{ visible.length }} 個</p>
<article v-for="site in visible" :key="site.name">
  {{ site.name }} — {{ site.type }}
</article>
<p v-if="!visible.length">目前沒有符合條件的作品，試著調整分類。</p>

這裡的多選是「任一分類符合」

範例有兩個商店、一個作品集和一個部落格。只選商店會看到2個，加入作品集變成3個；全部取消則顯示0個。這是選中任一分類就顯示的規則，不是作品必須同時屬於所有選中分類。

如果希望全部取消代表「顯示全部」，要明確改寫條件，例如selected.value.length === 0時直接回傳sites，並把介面文字說清楚。不要讓訪客猜空白畫面是不是網站出錯。

套進模板時，分類值要一致

作品資料的type與checkbox的value必須相同，包括空格與大小寫。先用四張固定資料卡片確認切換規則，再接自己的作品資料。這段程式只篩選瀏覽器裡已有的資料，不會自動向伺服器搜尋，也不是存取權限控管；大量資料或分頁仍要另做查詢。

參考資料

資料核對於2026年10月3日；實際介面與文件可能更新。