Vue.js中如何实现选中select选项后禁用该选项并重置为默认值

先修正你现有代码里的2个基础问题：

• 组件方法属性拼写错误：method 应该改为 methods，否则绑定的change事件不会正常触发
• select没有做双向绑定，无法直接通过数据控制选中值重置，需要添加v-model绑定选中状态

实现逻辑 #

1. 给默认的--Select--选项设置空值value=""，作为重置的目标选项
2. 给select标签添加v-model绑定选中值，初始值设为空字符串，默认展示提示项
3. 初始化recipients数组时，给每一项添加默认的disabled: false属性，和模板里绑定的:disabled="recipient.disabled"逻辑对应
4. change事件触发时，先拿到当前选中的收件人id，找到数组中对应项将其disabled属性设为true，最后把v-model绑定的选中值重置为空，下拉框就会自动切回默认选项

完整可运行代码 #

<template>
  <select name="recipient" v-model="selectedRecipientId" @change="changeFunc">
    <option value="">--Select--</option>
    <option 
      v-for="recipient in recipients" 
      :key="recipient.id" 
      :value="recipient.id" 
      :disabled="recipient.disabled"
    >
      {{ recipient.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedRecipientId: '', // 绑定select选中值，初始对应默认提示项
      recipients: [
        {'id':3, 'name':'aaa', disabled: false},
        {'id':5, 'name':'bbb', disabled: false},
        {'id':8, 'name':'ccc', disabled: false}
      ],
    }
  },
  methods: {
    changeFunc() {
      // 匹配当前选中的收件人，设置为禁用状态
      const targetRecipient = this.recipients.find(item => item.id === this.selectedRecipientId)
      if (targetRecipient) {
        targetRecipient.disabled = true
      }
      // 重置选中状态，切回默认提示项
      this.selectedRecipientId = ''
    }
  }
}
</script>

效果说明 #

每次选中任意一个收件人选项后，该选项会立刻被置为不可选状态，下拉框自动切回最上方的--Select--默认提示项，下次展开下拉时已经选过的选项无法再次点击。

如果你后续需要动态新增recipients项，新增时记得带上disabled: false初始属性；如果是给已存在的、初始没有disabled属性的项加禁用状态，需要用this.$set(目标项, 'disabled', true)写法保证响应式更新。

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