使用Vue.js中的唯一值填充嵌套对象数组中的下拉列表

data() {
  return {
    items: [
      { id: 1, name: 'Apple', category: 'Fruit' },
      { id: 2, name: 'Carrot', category: 'Vegetable' },
      { id: 3, name: 'Orange', category: 'Fruit' },
      { id: 4, name: 'Broccoli', category: 'Vegetable' }
    ]
  }
}

<template>
  <div>
    <select v-for="category in uniqueCategories" :key="category">
      <option v-for="item in items" :key="item.id" v-if="item.category === category">
        {{ item.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', category: 'Fruit' },
        { id: 2, name: 'Carrot', category: 'Vegetable' },
        { id: 3, name: 'Orange', category: 'Fruit' },
        { id: 4, name: 'Broccoli', category: 'Vegetable' }
      ]
    }
  },
  computed: {
    uniqueCategories() {
      const categories = new Set();
      this.items.forEach(item => {
        categories.add(item.category);
      });
      return Array.from(categories);
    }
  }
}
</script>