Vue响应式对象联动失效求助：城市选区县不联动、默认选中无效

数据结构如下：

[
  {name: "A city",items:["A district","AB district","ABC district"]},  
  {name: "B city",items:["B district","BB district","BBC district"]}
]

选择城市时，区县选择框无法同步更新，同时:selected默认选中功能也失效。尝试用ref替代reactive后问题仍存在，求解决方法。

解决方法 #

1. 正确绑定响应式数据与事件 #

核心是用v-model统一控制选中状态，通过监听城市选中值的变化，自动同步区县列表及默认选中项，不要手动用:selected控制，避免和v-model冲突。

Vue3 实现示例

<template>
  <div>
    <!-- 城市选择器 -->
    <select v-model="selectedCity">
      <option v-for="city in cityList" :key="city.name" :value="city">
        {{ city.name }}
      </option>
    </select>

    <!-- 区县选择器 -->
    <select v-model="selectedDistrict">
      <option 
        v-for="district in selectedCity?.items || []" 
        :key="district" 
        :value="district"
      >
        {{ district }}
      </option>
    </select>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 城市数据源
const cityList = ref([
  {name: "A city",items:["A district","AB district","ABC district"]},  
  {name: "B city",items:["B district","BB district","BBC district"]}
])

// 选中的城市（默认选第一个）
const selectedCity = ref(cityList.value[0])
// 选中的区县（默认选当前城市第一个区县）
const selectedDistrict = ref(selectedCity.value.items[0])

// 监听城市切换，同步更新区县默认值
watch(selectedCity, (newCity) => {
  if (newCity?.items?.length) {
    selectedDistrict.value = newCity.items[0]
  }
})
</script>

Vue2 实现示例

<template>
  <div>
    <select v-model="selectedCity">
      <option v-for="city in cityList" :key="city.name" :value="city">
        {{ city.name }}
      </option>
    </select>

    <select v-model="selectedDistrict">
      <option 
        v-for="district in selectedCity.items" 
        :key="district" 
        :value="district"
      >
        {{ district }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: [
        {name: "A city",items:["A district","AB district","ABC district"]},  
        {name: "B city",items:["B district","BB district","BBC district"]}
      ],
      selectedCity: null,
      selectedDistrict: null
    }
  },
  mounted() {
    // 初始化默认选中值
    this.selectedCity = this.cityList[0]
    this.selectedDistrict = this.selectedCity.items[0]
  },
  watch: {
    selectedCity(newCity) {
      this.selectedDistrict = newCity.items[0]
    }
  }
}
</script>

2. 常见问题排查点 #

• 禁止混用:selected和v-model：v-model会自动管理选中状态，手动设置:selected会导致状态冲突。
• 保证值类型一致：如果城市选择器绑定的是对象，不要后续改用字符串匹配数据，避免无法找到对应区县列表。
• 响应式数据操作规范：Vue3中用reactive时，不要直接替换整个对象（比如state = {...newData}），需用Object.assign或改用ref；Vue2中确保数据是在data中声明的响应式变量。

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