VueJS更新cities属性后select选项不更新问题求助

问题根源 #

你的代码存在两个冲突点导致视图不更新：

• 同时使用v-model和:selected属性，两者会互相干扰——v-model已自动管理选中状态，手动设置:selected会破坏Vue的响应式绑定逻辑。
• 错误使用this.$set更新整个数组，this.$set适用于修改数组指定索引元素或对象属性，直接赋值数组本身才是正确触发响应式的方式。

修复步骤 #

1. 移除模板中的:selected属性
   仅保留v-model即可，它会自动根据selectedCity的值匹配选中选项。

2. 简化数组更新逻辑
   直接赋值this.cities就能触发响应式更新，无需额外调用this.$set。

修改后的代码 #

模板部分

<select ref="mySelect" v-model="selectedCity">
  <option v-for="city in cities" :value="city.id" :id="city.id">{{ city.name }}</option>
</select>

数据更新部分

let cityObj = Object.values(data).map(city => {
  return { id: parseInt(city.id), name: city.topic };
});
// 直接赋值数组，Vue会检测到变化并更新视图
this.cities = [{id: 0, name: 'England' },...cityObj];

额外验证点 #

• 确保服务器请求的回调函数正确绑定this，如果用普通函数需加.bind(this)，或直接改用箭头函数，避免this指向错误导致无法更新this.cities。
• 更新后打印this.cities确认数据结构，比如id是否为数字类型，避免和selectedCity（初始为数字0）类型不匹配。

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