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

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

本文详解如何在 Vue 3 中动态禁用的特定项——通过 :disabled 绑定布尔表达式，结合数据属性（如 vegan: true/false）实现精细化控制，无需移除选项即可灰化禁用非合规项。

本文详解如何在 vue 3 中动态禁用 `

在 Vue 应用中，常需在保持选项可见性的同时禁用部分

✅ 正确做法：用 :disabled 替代 v-if

Vue 的

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

? 注意：:disabled 接收布尔值。当 ing.vegan 为 false（即非素食）时，!ing.vegan 为 true，该选项即被禁用，但仍保留在下拉列表中、呈灰色且不可选。

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

下载

? 进阶场景：按模式切换禁用逻辑

若需支持「仅显示素食」与「全部显示（但禁用非素食）」两种模式，可引入一个开关变量（如 onlyVegan），并调整逻辑：

<select class="form-control"><option v-for="ing in ingredients" :key="ing.ID" :value="ing.ID" :disabled="onlyVegan && !ing.vegan">
    {{ ing.DESC }} ({{ ing.vegan ? '✅ Vegan' : '❌ Non-vegan' }})
  </option></select><button>
  {{ onlyVegan ? '显示全部食材' : '仅限素食食材' }}
</button>

配合 Composition API：

import { ref } from 'vue'

export default {
  setup() {
    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: 'tofu', vegan: true }
    ])
    const onlyVegan = ref(false)

    return {
      ingredients,
      onlyVegan
    }
  }
}

⚠️ 关键注意事项

必须加 :key：v-for 渲染
disabled 不影响 v-model 绑定：被禁用的选项无法被选中，因此不会触发 v-model 更新，无需额外校验；
服务端数据兼容性：确保后端返回的 vegan 字段为布尔值（true/false）或统一转换（如 'Y' → true, 'N' → false），避免字符串比较陷阱；
无障碍访问：禁用选项仍保留在 DOM 中，屏幕阅读器可识别其存在与禁用状态，符合 WCAG 标准。

通过合理运用 :disabled + 响应式数据，你既能满足业务上“可见但不可选”的需求，又保持代码简洁、语义清晰、体验友好。