vue.js中的数组依赖关系

Question

Vue JS-2在数据中声明空数组时出现了问题。在工作开始时，我用100个嵌套数组填充数组A。稍后，在用户操作期间(单击呈现的元素)，我需要从数组A中获取与单击的块对应的元素，并为用户“展开”，以便他可以编辑所有字段。为此，我取一个空数组B，并将其分配给数组A的目标元素。然后，通过v-for，从数组B的内容中提取来自v模型的输入。

问题是，在我将数组B与数组A的元素等同之后，它们似乎是相互关联的，而对数组B的任何更改都会导致嵌套数组A中的相同更改。

我找不到解决办法，去哪儿找？数组B仅仅是数组A元素的副本并过着自己的生活是必要的。

示例

var app = new Vue ({
          el: '#app',
          data: {
            array_1: [['22', '43', '12'], ['tg', 'gf', 'fc'], ['fff', 'iii', 'ppp']],
            array_2: []
          },
          methods: {
          start_edit (arr) {
            app.array_2 = arr;
            }
          }

        });

单击时，使用clicked元素作为参数调用start_edit ()方法。假设是这样的：

start_edit (array_1 [2])

然后，我在array_2中改变了一些东西，它也立即改变了array_1 2；

如何避免这种情况？

Answer 1

您通过引用复制原始数组，这意味着两个数组指向内存中相同的位置(即它们都是相同的数组)。你想按价值复制。在您的例子中，您可能想要执行array_2 = JSON.parse(JSON.stringify(arr))。这里有更多关于https://stackoverflow.com/a/23536726/3401008的信息