使用Vuejs按多个类别过滤记录

<template>
  <div>
    <div>
      <label v-for="category in categories" :key="category">
        <input type="checkbox" :value="category" v-model="selectedCategories">
        {{ category }}
      </label>
    </div>
    <ul>
      <li v-for="record in filteredRecords" :key="record.id">
        {{ record.name }} - {{ record.category }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      records: [
        { id: 1, name: 'Record 1', category: 'Category A' },
        { id: 2, name: 'Record 2', category: 'Category B' },
        { id: 3, name: 'Record 3', category: 'Category A' },
      ],
      categories: ['Category A', 'Category B'],
      selectedCategories: [],
    };
  },
  computed: {
    filteredRecords() {
      if (this.selectedCategories.length === 0) {
        return this.records;
      } else {
        return this.records.filter(record =>
          this.selectedCategories.includes(record.category)
        );
      }
    },
  },
};
</script>