VueJS使用下拉选择时如何过滤数组数据

data() {
  return {
    options: [
      { value: 'apple', label: 'Apple' },
      { value: 'banana', label: 'Banana' },
      { value: 'orange', label: 'Orange' },
      { value: 'grape', label: 'Grape' },
      // 其他数据项...
    ],
    selectedOption: '' // 用于绑定选择的选项值
  }
}

<select v-model="selectedOption">
  <option value="">All</option>
  <option v-for="option in filteredOptions" :value="option.value">{{ option.label }}</option>
</select>

computed: {
  filteredOptions() {
    if (this.selectedOption === '') {
      return this.options; // 返回原始数据列表
    } else {
      return this.options.filter(option => option.value === this.selectedOption);
    }
  }
}