Vuetify将Checkbox搜索筛选替换为ChipGroup的实现错误排查

问题原因 #

你的实现存在两个核心错误：

• 混淆了所有可选筛选项的数据源和当前已选中的筛选项集合两个变量。你将v-model绑定的assetFilters（存选中值）同时作为Chip的遍历渲染源，会导致取消选中某一项时，对应的Chip直接从页面消失，无法再次选中。
• 没有给<v-chip>绑定value属性，v-chip-group无法识别每个Chip对应的匹配值，不能和v-model正常联动。

修复方案 #

1. 调整data定义，新增全量可选筛选项的独立变量：

data () {
  return {
    // 新增：所有可选择的筛选项列表
    assetFilterOptions: ['powerpoint', 'pdf', 'image', 'video', 'link', 'text'],
    // 保留：当前选中的筛选项，默认全选可以保留原有赋值
    assetFilters: ['powerpoint', 'pdf', 'image', 'video', 'link', 'text']
  }
}

2. 修改ChipGroup模板代码：

<v-chip-group
  v-model="assetFilters"
  multiple
>
  <v-chip
    v-for="item in assetFilterOptions"
    :key="item"
    :value="item"
    outlined
    filter
  >
    {{ item }}
  </v-chip>
</v-chip-group>

原有监听assetFilters的watch逻辑不需要修改，可正常触发搜索逻辑。

内容的提问来源于stack exchange，提问作者Pianoc