Vue.js使用v-show条件渲染筛选项目标签不生效问题排查

以下是几种最可能导致问题的情况，对应修复方法：

1. selectedTags初始值类型错误 #

绑定多个复选框的v-model必须是数组类型，如果初始设为字符串、null或其他类型，会导致选中的标签无法正确收集，进而匹配失败。

// 正确的初始化方式
data() {
  return {
    selectedTags: [], // 必须是空数组
    projects: [
      { name: 'Vue作品集项目', tags: ['Vue', 'CSS'] },
      { name: 'React组件库', tags: ['React', 'TypeScript'] }
    ]
  }
}

2. v-show的匹配逻辑错误 #

很多人会错误地直接用includes判断数组与数组的关系，而正确的逻辑需要处理两种情况：未选中任何标签时显示所有项目，选中标签时判断项目与选中标签是否有交集。

<!-- 正确的筛选逻辑 -->
<div 
  v-for="project in projects" 
  :key="project.id" 
  v-show="selectedTags.length === 0 || selectedTags.some(tag => project.tags.includes(tag))"
>
  <h3>{{ project.name }}</h3>
  <p>标签：{{ project.tags.join(', ') }}</p>
</div>

3. 复选框value与项目标签类型不匹配 #

如果项目标签是数字类型，但复选框的value写为字符串（比如value="1"），或者反过来，会导致includes判断时类型不匹配，无法命中。

<!-- 项目标签是数字时，用v-bind绑定数值 -->
<input type="checkbox" v-model="selectedTags" :value="1" /> 前端框架
<!-- 项目标签是字符串时，直接写value -->
<input type="checkbox" v-model="selectedTags" value="Vue" /> Vue

4. Vue2的响应式更新问题（仅Vue2） #

在Vue2中，如果手动修改selectedTags的元素而不是用数组方法，可能不会触发视图更新。确保用Vue支持的数组方法修改：

// 正确的修改方式
this.selectedTags.push('Vue');
// 或者重新赋值数组
this.selectedTags = [...this.selectedTags, 'CSS'];

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