javascript - 在 VueJS 中保持两个对象数组分开？

Question

我有两个对象数组:

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

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

  methods: {
    addNametoA() {
      this.a.push({"name":null})
    },
     CopyAtoB() {
      this.b = this.a
    }
  }

问题是，一旦触发 CopyAtoB() 方法，那么每当我将一个对象添加到 a 时，它也会自动将其复制到 b 。这种情况不应该发生，我该如何避免它发生？

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

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

Answer 1

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

您需要在CopyAToB()中复制数组。像这样的事情:

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