Vue使用v-model输入复制数组项答案

【问题标题】：Vue Duplicating an array item with v-model inputsVue使用v-model输入复制数组项
【发布时间】：2022-08-13 20:34:37
【问题描述】：

我有一个 VueJS 项目。我有一个 v-for 循环，每行都有输入字段。我想复制该行。但由于某种原因，重复的字段绑定到原始行。

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

duplicateRow(index, e){
 this.exercises.splice(index, 0, e);
}

所以它完美地复制了，但是当我更改新行的值时，它也会更改原始行的值。无论我添加多少行，都会发生这种情况。

我觉得答案将是关于反应性的，但我感到愚蠢和迷失。

只需在duplicateRow:dupicateRow(index, e) { this.exercises.splice(index, 0, structuredClone(e))} 中将e 替换为structuredClone(e)。 Docs。

标签： arrays vue.js loops

【解决方案1】：

在我看来，使用 splice 来处理复制项目无效，因为您指向的项目具有反应性，并且您正在深度克隆它并将其附加到您的数组中。最好的方法就是使用推送（如果你不是说最新的项目必须包含你已经存储的项目）

所以你只需要在你的 duplicateRow 方法中执行此操作

duplicateRow(index, e){
    this.exercises.push({})
}

可以在这里测试示例：https://jsfiddle.net/7bpu6wen/8/

【讨论】：

【解决方案2】：

问题是新行实际上是对与原始行完全相同的对象的引用。要创建一个新对象，您必须克隆原来的。

有几种方法可以做到这一点。如果对象没有嵌套属性，您可以执行浅的使用Object.assign() 或展开运算符进行复制。如果是这样，您可以使用 JSON.parse(JSON.stringify()) 或 lodash cloneDeep()（更快）来制作深的复制。

使用浅拷贝：

duplicateRow(index, e){
  this.exercises.splice(index, 0, {...e});
}

使用深拷贝：

duplicateRow(index, e){
  this.exercises.splice(index, 0, JSON.parse(JSON.stringify(e)));
}

【讨论】：