Vue.js select的v-model触发onChange返回旧值/值不更新修复方法

• 多余的@change事件和错误的手动赋值逻辑是核心问题：v-model本身已经实现了select选中值和choosed变量的双向绑定，不需要手动在change事件里给choosed赋值。你写的onChange方法里this.item根本不存在——item是v-for在模板里的临时循环变量，methods方法里访问不到，执行到this.item.id的时候会直接抛类型错误，打断v-model的正常更新流程，导致选中值卡在上一次的结果。
• devices初始值类型错误：接口返回的是设备数组，你在data里初始值写的是空对象{}，类型不匹配容易引发Vue响应式更新异常。
• 页面切换时如果组件被路由缓存（比如开了keep-alive），组件内的状态不会自动重置，会保留上一次离开时的数值，没有做对应重置处理。

1. 直接删除select标签上的@change="onChange()"绑定，同时删掉methods里写的错误的onChange方法，v-model会自动完成选中值的同步，不需要额外手动赋值。
2. 修正data里的初始值类型，把devices的初始值从空对象改成空数组，和接口返回类型对齐：

export default {
    data() {
        return {
            devices: [], // 原代码为 devices: {}
            choosed: null,
        }
    },
}

3. 增加页面进入时的状态重置逻辑，确保每次进入消息页面选中状态都是初始值，同时拉取最新的设备列表：

• 如果你没开keep-alive组件缓存，把逻辑写在mounted钩子中：

mounted() {
    this.choosed = null; // 重置选中状态
    this.getDevices(); // 拉取最新设备列表
}

• 如果你开了keep-alive缓存组件，把逻辑写在activated钩子中：

activated() {
    this.choosed = null;
    this.getDevices();
}

4. 修正后的select模板代码参考：

<select class="form-select form-select-lg mb-3" v-model="choosed">
    <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>

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