填写表单其他输入框时城市选择器意外重置问题求助

云原生阿岚

2026-8-7

问题分析与解决方案

核心问题：城市选项的value绑定错误

你城市选择器的v-for循环中，:value错误绑定成了form.cityID，这会导致所有城市选项的value值都和当前选中的城市ID一致。当你修改其他输入框触发组件重渲染时，Vue会重新生成这些选项，此时所有选项的value都等于当前form.cityID，但由于选项的实际值逻辑错误，浏览器无法匹配到正确的选项，最终导致城市选择器被重置。

修正代码

把城市选项的:value改为city.id：

<select 
    type="text" 
    class="questionnaire__questions-input questionnaire__input"
    v-model="form.cityID"
    :class="$v.form.cityID.$error ? 'questionnaire-input-invalid' : ''">
    <option value="">Выберите город</option>
    
    <option v-for="city in cities" :key="city.id" :value="city.id">{{city.name}}</option>
    
</select>

额外优化建议

避免空值报错：你的Watcher中直接取filter结果的[0]，如果COUNTRIES还未加载完成，或者找不到对应国家，会导致undefined.cities报错。可以添加空值判断：

'form.countryID': function(newVal){
    if (!newVal || !this.COUNTRIES.length) {
        this.cities = [];
        this.form.cityID = ''; // 同时重置城市选择
        return;
    }
    const country = this.COUNTRIES.find(item => item.id == newVal);
    this.cities = country?.cities || [];
    this.form.cityID = ''; // 切换国家时重置城市选择，提升用户体验
}