在Vue.js 2.0中按两个或多个selects筛选列表

new Vue({
  el: '#app',
  data: {
    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' },
      // ...
    ],
    selectedCategory: '',
    selectedName: ''
  },
  // ...
});

<div id="app">
  <select v-model="selectedCategory">
    <option value="">All Categories</option>
    <option value="Category A">Category A</option>
    <option value="Category B">Category B</option>
    <option value="Category C">Category C</option>
    <!-- ... -->
  </select>
  
  <select v-model="selectedName">
    <option value="">All Names</option>
    <option v-for="item in filteredItems" :value="item.name">{{ item.name }}</option>
  </select>
  
  <ul>
    <li v-for="item in filteredItems">
      {{ item.name }} - {{ item.category }}
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    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' },
      // ...
    ],
    selectedCategory: '',
    selectedName: ''
  },
  computed: {
    filteredItems: function() {
      return this.items.filter(item => {
        if (this.selectedCategory && item.category !== this.selectedCategory) {
          return false;
        }
        if (this.selectedName && item.name !== this.selectedName) {
          return false;
        }
        return true;
      });
    }
  }
});