Vue中如何将select选中的option值传递给methods的onChange函数

现有代码存在4个直接导致功能异常的问题：

• 给select绑定v-model="choosed"、给option绑定:value="item.id"后，Vue会在选中选项时自动把对应id同步到choosed变量，不需要在change事件里手动重复赋值
• item是v-for循环内的临时局部变量，仅在对应option标签范围内可访问，组件实例this上不存在这个属性，写this.item.id必然触发undefined报错
• devices初始值定义为对象{}，但接口返回的是设备列表数组，初始值类型不匹配可能导致v-for遍历异常
• 绑定@change事件时加了空括号onChange()，会拦截Vue默认传递的事件参数，就算要手动取事件目标值也无法获取

直接用v-model的自动同步能力即可，这是Vue双向绑定的基础能力，不需要多余操作：

1. 修正data初始值、补全生命周期调用、简化change方法

export default {
  data() {
    return {
      devices: [], // 改为空数组，匹配接口返回的列表结构
      choosed: null,
    }
  },
  created() {
    this.getDevices() // 页面创建时拉取设备列表，记得加这个调用，不然devices会一直为空
  },
  methods: {
    getDevices() {
      axios.get(`/api/devices`)
        .then(response => {
          this.devices = response.data;
        });
    },
    onChange() {
      // 触发change时v-model已经完成赋值，this.choosed就是当前选中项的item.id
      console.log('当前选中设备ID：', this.choosed)
      // 后续业务逻辑直接写在这里，比如调用发送短信接口
    }
  }
}

2. 修正模板的事件绑定，去掉change事件后的空括号

<select class="form-select form-select-lg mb-3" v-model="choosed" @change="onChange">
  <option :value="null">Choose Device to Send SMS</option>
  <option v-for="item in devices" :key="item.id" :value="item.id">
    {{ item.device_name }}
  </option>
</select>

如果需要在onChange里显式接收选中值，也可以在绑定时手动传参：
模板修改为：

<select class="form-select form-select-lg mb-3" v-model="choosed" @change="onChange(choosed)">
  <!-- option内容和之前一致 -->
</select>

对应方法修改为：

onChange(selectedDeviceId) {
  // selectedDeviceId就是当前选中的设备ID，直接使用即可
  console.log(selectedDeviceId)
}

注意：双向绑定已经自动完成choosed的赋值，不要在onChange里重复写this.choosed = xxx这类赋值代码，除非你有特殊的值转换需求。

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