Vuetify复选框多条件筛选任务数据无结果问题求助

问题原因 #

原代码中filteredData计算属性存在两个核心问题：

1. for循环在第一次迭代时就直接return筛选结果，导致仅返回第一个选中状态对应的任务，后续选中的筛选条件完全不生效。
2. 使用if(this.task)判断是否有选中项是错误的——空数组[]在JavaScript中属于真值，会导致未勾选任何复选框时无法返回全部任务列表。

修复后的计算属性代码 #

computed:{
    filteredData() {
        // 未勾选任何复选框时返回全部任务
        if(this.task.length === 0){
            return this.recordList
        }
        // 筛选出状态匹配任意选中复选框的任务
        return this.recordList.filter(item => {
            return this.task.includes(item.status)
        })
    }
}

代码说明 #

• 用this.task.length === 0准确判断是否未勾选任何复选框，此时返回全部任务。
• 使用Array.filter()结合Array.includes()，一次性筛选出所有状态匹配选中复选框的任务，完美支持单个或多个复选框的筛选需求。

原代码参考 #

模板代码

<fieldset>
    <legend>TASK STATUS</legend>
    <span v-for="(item, index) in checkboxObj" :key="index">
        <input type="checkbox" v-model="task" :value="item.value">
        {{ item.name }}
    </span>
</fieldset>
<v-simple-table>
    <thead>
        <tr>
            <th>TASK</th>
            <th>STATUS</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(data, index) in filteredData" :key="index">
            <td>{{ data.task }}</td>
            <td>{{ data.status }}</td>
        </tr>
    </tbody>
</v-simple-table>

Data代码

data(){
    return{
        recordList:[
            {task:'Cleaning Garage',status:'Due Today'},
            {task:'Checking Tools',status:'Overdue'},
            {task:'Repair Bikes',status:'Due Tomorrow'}
        ],
        task:[],
        checkboxObj: [
            {name:'OVERDUE',value:'Overdue'},
            {name:'DUE TODAY',value:'Due Today'},
            {name:'DUE TOMORROW',value:'Due Tomorrow'}
        ]
    }
}

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