Vue2中v-for生成option的select组件v-model绑定选中值失效问题

问题根因 #

• 直接将v-model绑定到了只读计算属性activeItem的属性上，默认的计算属性只有getter没有setter，无法响应select的修改操作，也会导致回显时的数据同步异常
• 存在数据加载时序问题：如果store中的items列表加载晚于activeItem的赋值，初始化时select找不到对应的value匹配项，就会出现无回显的情况
• 存在activeItem.id和item.id的数据类型不一致的可能，比如一个是数字1，一个是字符串"1"，全等匹配时会判定为不相等导致回显失败
• option上绑定的:item="item"是无效冗余属性，可直接清理

可直接落地的解决方案 #

1. 给computed的activeItem添加setter，同步修改到store #

把script部分的activeItem计算属性改成带get和set的写法，修改后v-model的变更会自动同步到store：

computed: {
  items(){ 
    return this.$store.state.items;
  },
  activeItem: {
    get(){ 
      return this.$store.state.activeItem; 
    },
    set(val){
      // 替换为你对应的Vuex mutation方法名，把新的activeItem更新到store
      this.$store.commit('updateActiveItem', val)
    }
  }
}

2. 增加列表加载判断，避免时序问题 #

给select加v-if判断，确保items列表加载完成后再渲染select组件，避免初始化匹配不到值：

<template>
  <div>
    <select v-model="activeItem.id" v-if="items && items.length">
      <option
        v-for="item in items"
        :key="item.id"
        :value="item.id"
      >
        {{item.displayData}}
      </option>
    </select>
  </div>
</template>

3. 统一ID的数据类型 #

确保activeItem.id和所有item.id的类型完全一致，比如都是数字/都是字符串，避免全等匹配失效。如果后端返回的类型不一致，可以在获取数据时统一转换：

// 示例：统一转成数字类型
items.forEach(item => item.id = Number(item.id))
activeItem.id = Number(activeItem.id)

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