Vue.js 输入框联合复选框筛选数据时复选框失效问题排查

• 逻辑运算符短路导致筛选失效：过滤条件里写的this.search_all_task.length === 0 || 内容匹配 || 复选框1匹配 || 复选框2匹配 || 复选框3匹配属于或逻辑链，当输入框为空时第一个判断条件直接返回true，JS或运算遇到true会直接终止后续判断，所有列表项都会被返回，复选框的筛选逻辑完全不会执行，这就是空输入时勾选复选框看不到效果的核心原因。
• 复选框事件与绑定写法错误：模板里写的@id是不存在的DOM事件，复选框值变化根本不会触发你写的赋值逻辑；三个复选框同时绑定v-model="dashSelect3"会导致值互相覆盖；第三个复选框的id和labelfor属性和第一个重复，会出现点击label选不中对应复选框的问题；dashSelect1、dashSelect2两个变量没有在data中声明初始值，调用includes方法时会直接报错。
• 多选值存储逻辑错误：复选框多选场景不能用字符串类型的v-model存储选中值，字符串同一时间只能存一个选中项，无法支持同时勾选多个标题的筛选需求。

1. 补全并修正data初始值 #

把多选复选框的绑定值统一设为数组类型，补全缺失的变量声明：

data() {
   return {
     search_all_task: '', // 搜索框初始值
     dashSelect: [], // 多选项统一用数组存储选中值
     allTaskDashboard : [
       { id: 1, title: "title1", content: "content1" },
       { id: 2, title: "title2", content: "content2" },
       { id: 3, title: "title3", content: "content3" }
     ]
 }
},

2. 修正模板复选框写法 #

移除不存在的@id事件，修正重复的id属性，所有复选框统一绑定数组类型的选中值：

<input v-model="search_all_task" placeholder="搜索任务内容">

<input type="checkbox" class="form-check-input" true-value="title1" v-model="dashSelect" id="checkbox1">
<label class="form-check-label" for="checkbox1">Title 1</label>

<input type="checkbox" class="form-check-input" true-value="title2" v-model="dashSelect" id="checkbox2">
<label class="form-check-label" for="checkbox2">Title 2</label>

<input type="checkbox" class="form-check-input" true-value="title3" v-model="dashSelect" id="checkbox3">
<label class="form-check-label" for="checkbox3">Title 3</label>

3. 修正筛选计算属性逻辑 #

拆分搜索匹配、复选框匹配两个独立判断，用且逻辑关联，避免空输入短路所有筛选规则：

computed:{
   filterDashboardTask(){
      return this.allTaskDashboard.filter(item =>{
         // 搜索规则：输入为空默认全匹配，否则匹配内容关键词
         const matchSearch = this.search_all_task.length === 0 
           || item.content.toLowerCase().includes(this.search_all_task.toLowerCase())
         // 复选框规则：未勾选任何选项默认全匹配，否则匹配选中的标题
         const matchCheckbox = this.dashSelect.length === 0 
           || this.dashSelect.includes(item.title)
         // 两个规则同时满足才返回对应项
         return matchSearch && matchCheckbox
      });
   },
}

列表渲染部分不需要修改，保持原有v-for="item in filterDashboardTask"写法即可。

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