Vue中v-for渲染select绑定v-model导致选中值全局同步的问题

你遇到的问题很典型——所有循环生成的select都绑定了同一个selected变量，所以不管操作哪个用户的区域，修改的都是全局的selected值，自然所有select都会跟着变。下面是具体的解决步骤：

1. 重构数据结构，让每个用户拥有独立的选中状态 #

把原来的selected数组改成对象，用用户的唯一id作为键，对应的值就是该用户的选中项。这样每个用户的选中状态就完全独立了：

export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1', iconLeft: 'user' },
        { value: '5ad0ac33a8abbc3fe4ce2863', label: '目标选项', iconLeft: 'user' }
      ],
      selected: {} // 空对象，存储每个用户的选中值
    }
  },
  // 如果需要默认选中值，可以在created钩子初始化
  created() {
    // 假设this.users是已获取的用户列表
    this.users.forEach(user => {
      this.$set(this.selected, user.id, 'option1') // 默认选中第一个选项
    })
  },
  methods: {
    toggleShowUser(user) {
      // 现在修改的是当前用户对应的选中值
      this.$set(this.selected, user.id, "5ad0ac33a8abbc3fe4ce2863")
      // Vue 3中不需要$set，直接赋值即可：this.selected[user.id] = "xxx"
    }
  }
}

2. 修改模板的v-model绑定 #

把select的v-model从全局的selected改成针对当前用户的selected[user.id]，确保每个select绑定自己的独立状态：

li(v-for="user in users", :id="'user_' + user.id") 
  .user-management(@click="toggleShowUser(user)", :id="'user' + user.id") 
    select(v-model="selected[user.id]" :options="options")

这样修改后，点击某个用户的区域时，只会更新该用户对应的select选中值，其他用户的select不会受到影响啦。

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