vue选中所有具有由计算方法生成的值的复选框

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        <input type="checkbox" :value="item" v-model="selectedItems">
        {{ item.name }}
      </li>
    </ul>
    <button @click="selectAll">Select All</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', visible: true },
        { id: 2, name: 'Banana', visible: true },
        { id: 3, name: 'Cherry', visible: true },
      ],
      searchQuery: '',
      selectedItems: []
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.visible && item.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
    }
  },
  methods: {
    selectAll() {
      this.selectedItems = [...this.filteredItems];
    }
  }
};
</script>

selectAll() {
  this.selectedItems = [...this.filteredItems]; // 这样做已经是响应式的
}

selectAll() {
  this.filteredItems.forEach(item => {
    this.$set(this.selectedItems, this.selectedItems.indexOf(item), item);
  });
}