Vue搜索结果复选框筛选问题：默认全选与筛选绑定实现

问题1：默认选中所有复选框 #

Vue的v-model会完全接管复选框的选中状态，原生checked属性会被忽略。要实现点击搜索后默认全选，只需在search方法中，将所有颜色值同步到selected数组：

search() {
  this.searchList = this.data;
  this.isSearched = true;
  // 同步所有颜色到selected，实现全选
  this.selected = [...this.colors];
}

问题2：实现复选框筛选功能 #

无需使用v-on:click，通过计算属性根据selected数组动态筛选水果列表即可。新增一个filteredFruits计算属性，替代原模板中的searchList：

修改后的完整代码 #

JavaScript

new Vue({
    el: '#app',
    data: {
        isSearched: false,
        searchList: [],
        data: [ 
            { "name": "apple", "color": "red" },
            { "name": "banana", "color": "yellow" },
            { "name": "strawberry", "color": "red" },
            { "name": "avocado", "color": "green" },
            { "name": "kiwi", "color": "green" },
        ],
        selected: []
    },
    computed: {
        colors() {
           let colors = [];
           this.searchList?.forEach(fruit => {
              if(colors.indexOf(fruit.color) === -1){
                  colors.push(fruit.color);
              }    
           });
         return colors;
        },
        selectAll: {
            get(){
                return this.colors.length == this.selected.length;
            },
            set(value){
                let selected = [];
                if (value) {
                    this.colors.forEach(color => {
                        selected.push(color);
                    });
                }
                this.selected = selected;
            }
        },
        // 新增：筛选后的水果列表
        filteredFruits() {
            // 如果选中所有颜色，直接返回全部水果
            if(this.selected.length === this.colors.length) {
                return this.searchList;
            }
            // 只返回颜色在selected数组中的水果
            return this.searchList.filter(fruit => this.selected.includes(fruit.color));
        }
    },
    methods: {
      search() {
        this.searchList = this.data;
        this.isSearched = true;
        // 默认选中所有颜色
        this.selected = [...this.colors];
      }
    }
});

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
<button @click="search">Search Fruit</button>
<br/><br/>
<div v-if="isSearched">
    <table>
        <tr>
            <th colspan="2">Filter</th>
        </tr>
        <tr>
            <th>
                <input type="checkbox" 
                       v-model="selectAll"
                       />
            </th>
            <th align="left">All Color</th>
        </tr>
        <tr v-for="color in colors">
            <td>
                <input type="checkbox" 
                        v-model="selected" 
                        :value="color" />
            </td>
            <td>{{ color }}</td>
        </tr>
    </table>
    <br/>
    <table>
        <tr>
            <th>Name</th>
            <th>Color</th>
        </tr>
        <!-- 使用筛选后的列表 -->
        <tr v-for="fruit in filteredFruits">
            <td>{{ fruit.name }}</td>
            <td>{{ fruit.color }}</td>
        </tr>
    </table>
</div>
</div>

CSS

table, td, th{
  border: 1px solid black;
  border-collapse: collapse;
}

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