本文详解如何在 Vue 3 中根据数据字段（如 vegan 状态）动态禁用 <select> 下拉项，既保持非纯素食材可见，又阻止其在新菜单中被选中，兼顾历史与新规需求。
本文详解如何在 vue 3 中根据数据字段（如 vegan 状态）动态禁用 `
在 Vue.js 中，禁用特定 <option> 元素不应使用 v-if——因为 v-if 会完全移除 DOM 节点，导致选项“不可见”，而你的需求是“可见但不可选”。正确做法是利用原生 HTML 的 disabled 属性，并通过 Vue 的绑定语法 :disabled 动态控制。
以下是一个完整、可运行的 Vue 3 Composition API 示例，模拟真实业务场景：
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<select class="form-control" v-model="selectedIngredientId">
<option value="">请选择食材</option>
<option
v-for="ing in ingredients"
:key="ing.ID"
:value="ing.ID"
:disabled="!ing.vegan && onlyVegan"
>
{{ ing.DESC }} {{ !ing.vegan ? '(非纯素)' : '(纯素)' }}
</option>
</select>
<br><br>
<label>
<input type="checkbox" v-model="onlyVegan"> 仅显示纯素食材（新菜单模式）
</label>
<p><strong>当前选择 ID：</strong>{{ selectedIngredientId }}</p>
</div>const { createApp, ref, computed } = Vue;
createApp({
setup() {
const ingredients = ref([
{ ID: 1, DESC: '巧克力', vegan: false },
{ ID: 2, DESC: '葵花籽油', vegan: true },
{ ID: 3, DESC: '蜂蜜', vegan: false },
{ ID: 4, DESC: '腰果奶', vegan: true }
]);
const onlyVegan = ref(false);
const selectedIngredientId = ref('');
// 可选：计算过滤后的纯素列表（用于其他场景，如仅渲染纯素项）
const veganOnlyList = computed(() =>
ingredients.value.filter(ing => ing.vegan)
);
return {
ingredients,
onlyVegan,
selectedIngredientId,
veganOnlyList
};
}
}).mount('#demo');✅ 关键要点说明：
- :disabled="!ing.vegan && onlyVegan" 是核心逻辑：当 onlyVegan 为真 且 当前食材 vegan 为假时，该选项被禁用；否则（旧配方模式或本身是纯素）保持可选。
- 始终为 v-for 添加 :key="ing.ID"，确保 Vue 正确追踪列表项，避免渲染异常。
- 使用 v-model 绑定选中值，便于后续表单提交或状态管理。
- 禁用项仍保留在 DOM 中、视觉可见（通常置灰），符合“可见但不可选”的产品需求；而 v-if 会导致选项消失，不满足历史配方回溯要求。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 后端返回字段名若为 'Vegan'（大写）或字符串 'Y'/'N'，需在 ingredients 初始化时做标准化转换，例如：
vegan: item.Vegan === 'Y' || item.vegan === true
- 若需彻底隐藏非纯素项（如切换至“纯素专用视图”），才应改用 v-if="ing.vegan || !onlyVegan" 配合条件渲染，但此与本例目标相悖。
- 浏览器原生 <select> 不支持对禁用项设置 :selected，因此务必确保 v-model 初始值不指向已被禁用的 ID，否则可能引发 UI 不一致。
通过合理运用 :disabled + 响应式状态，你可以在同一组件中灵活支撑多版本业务逻辑——无需重复代码，也无需拆分组件，真正实现「一套数据、两种行为」。
