Vue中v-model绑定数组项复制后数据同步问题求助

问题原因 #

你遇到的问题本质是JavaScript对象的引用传递导致的：当你在duplicateRow方法里直接把原对象e插入数组时，新添加的元素和原元素指向同一个内存地址的对象。Vue的v-model绑定的是这个对象的属性，所以修改新行的输入值时，原对象的属性也会同步变化，所有引用该对象的行都会跟着改变。

解决方法 #

1. 创建原对象的独立副本

必须复制出一个和原对象内容相同但内存独立的新对象，避免引用共享。根据你的对象结构，可选以下方式：

浅拷贝（适合无嵌套的简单对象）

用扩展运算符或Object.assign快速创建副本：

duplicateRow(index, e){
  // 扩展运算符方式
  const newItem = {...e};
  // 插入到原行的下一位（也可根据需求调整位置）
  this.exercises.splice(index + 1, 0, newItem);
}

或者用Object.assign：

duplicateRow(index, e){
  const newItem = Object.assign({}, e);
  this.exercises.splice(index + 1, 0, newItem);
}

深拷贝（如果对象有嵌套属性）

如果你的exercise对象里包含嵌套的子对象（比如e.detail.info这类层级），浅拷贝无法复制嵌套对象的引用，需要用深拷贝：

duplicateRow(index, e){
  // JSON序列化方式（注意：无法处理函数、Symbol等特殊类型）
  const newItem = JSON.parse(JSON.stringify(e));
  this.exercises.splice(index + 1, 0, newItem);
}

2. 优化v-for的key值

当前你用index作为:key，当数组插入/删除元素时，Vue可能会复用DOM元素引发异常行为。建议给每个对象添加唯一标识作为key：

duplicateRow(index, e){
  const newItem = {
    ...e,
    // 生成临时唯一ID（生产环境建议用后端返回的唯一ID或更可靠的生成方式）
    id: Date.now() + Math.random()
  };
  this.exercises.splice(index + 1, 0, newItem);
}

模板对应修改：

<div v-for="(e, index) in exercises" :key="e.id">
  <div @click="duplicateRow(index, e)">
    <input type="text" v-model="e.weight" />
    <input type="text" v-model="e.height" />
  </div>
</div>

总结 #

核心是避免直接复用原对象的引用，通过复制副本让新行拥有独立的数据对象，这样修改新行的值就不会影响原行。同时优化key值能让Vue的列表渲染更稳定，减少不必要的DOM操作。

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