如何在vue中按名称和列表过滤数组

data() {
  return {
    items: [
      { name: 'Apple', category: 'Fruit' },
      { name: 'Banana', category: 'Fruit' },
      { name: 'Carrot', category: 'Vegetable' },
      { name: 'Tomato', category: 'Vegetable' }
    ],
    filterName: '',
    filterCategory: ''
  };
}

<input v-model="filterName" placeholder="Filter by name">
<input v-model="filterCategory" placeholder="Filter by category">

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

computed: {
  filteredItems() {
    const nameFilter = this.filterName.toLowerCase();
    const categoryFilter = this.filterCategory.toLowerCase();

    return this.items.filter(item => {
      const itemName = item.name.toLowerCase();
      const itemCategory = item.category.toLowerCase();

      return itemName.includes(nameFilter) && itemCategory.includes(categoryFilter);
    });
  }
}