在VueJS中将两个对象数组分开？

Question

我有两个对象数组：

./

我有两种方法。第一种方法将对象添加到“ a”。第二种方法是将整个“ a”复制到“ b”。

  data: {
    a: [{"name":null}],
    b: [{"name":null}]
  },

问题在于，一旦触发CopyAtoB（）方法，则每当我向a添加对象时，它也会自动将其复制到b。这种情况不应该发生，如何避免呢？

这是一个显示此行为的jsbin。

https://jsbin.com/dojicasuqo/1/edit?html,js,console,output

Answer 1

在两种情况下，您都使用相同的数组。您正在传递reference，并且不复制数组。

您需要将阵列复制到CopyAToB()中。像这样：

this.b = [...this.a]

Answer 2

您确实可以做到 Radu Diță 所做的事情。但是，数组内的对象仍在被引用。

请参见example。

您应该改用以下内容。要获得完整的未引用的对象/数组。

copyAToBWithJson(){
  this.b = JSON.parse(JSON.stringify(this.a));
}