VueJS中如何禁用下拉框指定选项并按食谱类型控制显示

你需要通过一个状态变量区分新旧食谱场景，结合条件过滤食材列表和绑定禁用属性来实现需求：

1. 首先在你的Vue组件数据中添加一个状态变量，用来标记当前是旧食谱还是新食谱：

// Vue 2 示例（Vue 3 可在setup中用ref声明）
data() {
  return {
    isOldRecipe: false, // false表示新食谱，true表示旧食谱
    Ingredients: [
      { ID: 1, DESC: 'chocolate', VEGAN: 'N' },
      { ID: 2, DESC: 'Sunflower', VEGAN: 'Y' }
    ]
  }
}

2. 修改<select>中的<option>标签，结合条件实现过滤和禁用：

<select class="form-control">
  <option 
    v-for="ing in isOldRecipe ? Ingredients : Ingredients.filter(item => item.VEGAN === 'Y')" 
    :value="ing.ID"
    :disabled="isOldRecipe && ing.VEGAN === 'N'"
  >
    {{ ing.DESC }}
  </option>
</select>

代码说明： #

• 食材列表过滤：通过三元表达式判断，旧食谱时遍历全部Ingredients，新食谱时只保留VEGAN === 'Y'的素食食材。
• 禁用控制：仅在旧食谱场景下，对VEGAN === 'N'的非素食食材添加disabled属性，使其可见但无法选择。

这样就能同时满足新旧食谱的不同需求：旧食谱显示所有食材但禁用非素食选项，新食谱只展示素食食材。

内容的提问来源于stack exchange，提问作者user10191234