Vue嵌套v-for循环中v-model绑定异常问题求助

这个问题我之前也踩过坑，核心原因其实很直白：你不同行里的John/Jane本质上是同一个对象的引用。Vue的响应式系统是基于对象引用工作的，当你修改其中一个的share值时，所有指向这个对象的地方都会跟着变化——因为它们本来就是同一个东西。

问题重现的典型场景 #

比如你初始化数据的时候可能是这么写的（这是最容易踩坑的写法）：

// 错误示例：复用了同一个对象引用
const john = { name: 'John', share: 0 }
const jane = { name: 'Jane', share: 0 }

this.rows = [
  { amount: 100, team: [john, jane] },
  { amount: 299, team: [john, jane] }
]

这里两行的team数组里，John都是同一个对象，改一个自然所有行的John都会同步更新。

解决方法 #

1. 初始化时创建独立对象

确保每个row的team数组里的成员都是全新的对象，不要复用引用：

// 正确示例：每个row的team成员都是独立对象
this.rows = [
  { 
    amount: 100, 
    team: [
      { name: 'John', share: 0 }, 
      { name: 'Jane', share: 0 }
    ] 
  },
  { 
    amount: 299, 
    team: [
      { name: 'John', share: 0 }, 
      { name: 'Jane', share: 0 }
    ] 
  }
]

2. 后端数据处理：拷贝成员确保独立性

如果数据是从后端获取的，偶尔会出现后端返回的结构里存在对象引用复用的情况（虽然少见），这时候可以在拿到数据后，对每个row的team成员做一次拷贝：

// 假设res.data是后端返回的rows数组
this.rows = res.data.map(row => ({
  ...row, // 拷贝row的其他属性
  team: row.team.map(member => ({ ...member })) // 给每个member创建新对象
}))

如果你的member对象有嵌套属性，就需要用深拷贝（比如JSON.parse(JSON.stringify(member))或者lodash的cloneDeep），不过你的场景里是简单对象，浅拷贝足够。

3. 修正模板里的笔误（可选但建议）

你的模板里写的是v-for="member in row.teams"，但数据结构里是team（单数），虽然不影响当前问题，但统一命名能避免后续不必要的混淆~

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