Vue二级联动select异常 数据不渲染、需点击两次问题排查

初始版本联动完全失效的核心原因 #

• 父组件事件绑定逻辑错误：@input="cityidx"是将data中定义的数字类型变量cityidx直接作为事件回调函数，触发时无法接收子组件传出的索引值完成赋值，正确逻辑需要在事件回调中把子组件传来的值赋给cityidx。
• 子组件事件触发链路断裂：子组件定义的update计算属性没有被任何模板逻辑引用，城市下拉框v-model绑定的是本地data中的cityselect变量，用户选择选项时只会修改本地变量，完全不会触发update的setter，$emit方法永远不会执行。
• 子组件Props声明无效：声明了cityidx属性但父组件从未传递该值，属于冗余代码。
• 地区下拉选项缺失值绑定：地区下拉的<option>标签未配置:value属性，选中后无法获取正确的地区索引。

修改后需点击两次才能选中的核心原因 #

• v-model绑定名不匹配：父组件使用v-model:current-city、v-model:current-area做双向绑定，但子组件声明的接收Props为cityidx、areaidx，和v-model参数名完全不对应，父组件更新的值无法被子组件正确接收，计算属性返回值始终滞后一次更新，导致必须点击两次才能同步选中状态。
• 缺少切换城市后的重置逻辑：切换城市后地区列表会整体替换，但areaidx仍保留上一个城市的选中索引，容易出现索引越界、选中值错位的问题。

修复后完整代码 #

App.vue #

<template>
  <test
    :cities="cities"
    :areas="areas"
    v-model:current-city="cityidx"
    v-model:current-area="areaidx"
  ></test>
</template>
<script>
import test from '@/components/SelectBoxTest.vue';
import datalist from '@/assets/data.json';

export default {
  name:'App',
  components: {
    test,
  },
  data(){
    return{
      cityidx: 0,
      areaidx: 0
    }
  },
  computed: {
    cities(){
      return datalist
    },
    areas(){
      // 增加空值兜底，防止数据未加载时取值报错
      return datalist[this.cityidx]?.AreaList || []
    }   
  },
  watch: {
    // 切换城市时自动重置地区选中项为第一个
    cityidx() {
      this.areaidx = 0
    }
  }
}   
</script>

SelectBoxTest.vue #

<template>
  <!-- 城市选择下拉 -->
  <div>
    <select v-model="cityselect">
      <option 
        v-for="(city , idx) of cities" 
        :key="idx"
        :value="idx"
      >{{city.CityEngName}}</option>
    </select>
  </div>
  <!-- 地区选择下拉 -->
  <div>
    <select v-model="areaselect">
      <option
        v-for="(area , idx) of areas"
        :key="idx"
        :value="idx"
      >{{area.AreaEngName}}</option>
    </select>
  </div>
</template>

<script>
export default {
  name:'test',
  props:{
    // Props名称与v-model参数对应，短横线写法模板会自动映射为小驼峰变量
    currentCity: {
      type: Number,
      default: 0
    },
    currentArea: {
      type: Number,
      default: 0
    },
    cities: {
      type: Array,
      default: () => []
    },
    areas: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    cityselect: {
      get(){
        return this.currentCity;
      },
      set(val){
        // emit事件名与v-model参数严格对应
        this.$emit('update:currentCity' , val);
      }
    },
    areaselect: {
      get(){
        return this.currentArea;
      },
      set(val){
        this.$emit('update:currentArea' , val);
      }
    },
  },
};
</script>

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