Vue中如何禁用下拉选项？客户状态为dead时的方法实现

针对你提出的需求——当客户状态为dead时，禁用下拉框中的healthy、little healthy和unhealthy选项，不需要依赖checkHealthy方法处理禁用逻辑，直接在模板中通过条件绑定即可实现，同时需要修正原代码中多个下拉框共用同一v-model的问题（否则所有下拉框会同步选中值）。

完整修正代码 #

<template>
  <!-- 给v-for添加唯一key，每个select绑定对应customer的独立选中值 -->
  <select v-for="customer in customers" :key="customer.name" v-model="customer.selectedId">
    <!-- 在option上绑定disabled属性，直接判断禁用条件 -->
    <option 
      v-for="statu in status" 
      :key="statu.id" 
      :value="statu.id"
      :disabled="customer.statu === 'dead' && ['healthy', 'little healthy', 'unhealthy'].includes(statu.name)"
    >
      {{ statu.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      status: [
        { id: 1, name: 'healthy' },
        { id: 2, name: 'little healthy' },
        { id: 3, name: 'unhealthy' },
        { id: 4, name: 'unknown' },
      ],
      customers: [
        { name: 'John', statu: "healthy", selectedId: '' },
        { name: 'Adam', statu: "unhealthy", selectedId: '' },
        { name: 'Cristiano', statu: "dead", selectedId: '' },
        { name: 'Alberto', statu: "little healthy", selectedId: '' },
        { name: 'Kevin', statu: "healthy", selectedId: '' },
      ]
    }
  },
  methods: {
    // 若需在下拉框变更时执行其他业务逻辑，可保留此方法
    checkHealthy(statu) {
      // 示例：根据状态执行后续操作
      if (statu === 'dead') {
        // 这里添加你的业务代码
      }
    }
  }
}
</script>

关键说明 #

1. 修正v-model绑定：原代码所有下拉框共用同一个selected变量，会导致选中值同步，改为绑定每个customer对象的selectedId属性，实现每个下拉框独立选中。
2. 禁用条件绑定：通过:disabled指令直接判断两个条件：
   • 当前客户的状态是否为dead
   • 当前选项的名称是否在需要禁用的列表中
3. 关于checkHealthy方法：该方法不需要用来处理禁用逻辑，若你需要在下拉框选项变更时执行其他业务操作（比如触发接口请求），可以在@change事件中调用它并传递对应参数。

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