如何使用复选框过滤VueJS循环以显示不同的结果？

data() {
  return {
    items: [
      { name: 'Item 1', category: 'Category A' },
      { name: 'Item 2', category: 'Category B' },
      { name: 'Item 3', category: 'Category A' },
      { name: 'Item 4', category: 'Category C' },
    ],
    selectedCategories: [],
  };
},

<div>
  <label v-for="category in categories" :key="category">
    <input type="checkbox" v-model="selectedCategories" :value="category">
    {{ category }}
  </label>
</div>

<ul>
  <li v-for="item in filteredItems" :key="item.name">
    {{ item.name }} - {{ item.category }}
  </li>
</ul>

computed: {
  filteredItems() {
    if (this.selectedCategories.length === 0) {
      return this.items;
    } else {
      return this.items.filter(item => this.selectedCategories.includes(item.category));
    }
  },
  categories() {
    // 获取所有的分类
    return [...new Set(this.items.map(item => item.category))];
  },
},