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,控制台,输出

标签： javascriptvue.js

Answer 1

在这两种情况下，您都使用相同的数组。您正在传递 areference而不是制作数组的副本。

您需要将数组复制到CopyAToB(). 像这样的东西：

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