如何在 Vue 3 中根据条件禁用下拉选项（如仅禁用非纯素食材）-html教程-PHP中文网

如何在 Vue 3 中根据条件禁用下拉选项（如仅禁用非纯素食材）

本文详解如何在 Vue 3 中动态控制下拉项的禁用状态，通过 :disabled 绑定实现“显示但不可选”的效果——例如保留非纯素食材可见性，同时在纯素模式下将其禁用。

本文详解如何在 vue 3 中动态控制 `

在 Vue 中，禁用特定 （因为 v-if 会完全移除 DOM 节点，导致选项不可见），而应使用原生 HTML 的 disabled 属性，并通过 Vue 的响应式绑定 :disabled 动态控制其状态。

正确做法是：在 v-for 循环中，为每个

<select class="form-control"><option v-for="ing in ingredients" :key="ing.ID" :value="ing.ID" :disabled="onlyVegan && !ing.vegan">
    {{ ing.DESC }}
  </option></select>

✅ 注意：:disabled="onlyVegan && !ing.vegan" 表示——仅当启用纯素筛选（onlyVegan === true）且当前食材非纯素（ing.vegan === false）时，该选项才被禁用；否则（如普通模式或本身是纯素食材）保持可选。

Vue-router参考手册
Vue-router参考手册下载

下载

完整可运行示例（Vue 3 Composition API）：

<script setup>
import { ref, computed } from 'vue'

const ingredients = ref([
  { ID: 1, DESC: 'Chocolate', vegan: false },
  { ID: 2, DESC: 'Sunflower Seeds', vegan: true },
  { ID: 3, DESC: 'Honey', vegan: false },
  { ID: 4, DESC: 'Almond Milk', vegan: true }
])

const onlyVegan = ref(false)
const toggleMode = () => {
  onlyVegan.value = !onlyVegan.value
}
</script><template><div>
    <select class="form-control"><option v-for="ing in ingredients" :key="ing.ID" :value="ing.ID" :disabled="onlyVegan && !ing.vegan">
        {{ ing.DESC }} {{ !ing.vegan ? '(non-vegan)' : '(vegan)' }}
      </option></select><button>
      {{ onlyVegan ? 'Show all ingredients' : 'Show vegan only' }}
    </button>
  </div>
</template>

? 关键要点总结：

❌ 不要用 v-if 控制选项显隐——它会从 DOM 中删除元素，违背“可见但不可选”的需求；
✅ 必须用 :disabled + 布尔表达式，语义准确且符合 HTML 规范；
? :key="ing.ID" 强烈建议添加，避免列表更新时出现渲染异常；
⚠️ 后端返回字段若为字符串（如 vegan: "Y"/"N"），需在计算属性或模板中转换：!['Y', 'y', 'true'].includes(ing.vegan)；
? 如需进一步过滤（如新菜谱只显示纯素项），可在 v-for 中结合 computed 进行预过滤，而非仅依赖 disabled。

此方案兼顾用户体验与业务逻辑：历史配方仍能查看全部食材，而新创建流程可强制约束选择范围，真正实现渐进式迁移。