0

我在我的 Vue 项目中使用 Vue.Draggable 并尝试将按钮从侧边拖动（克隆）到可拖动组件中。

当我将按钮克隆到组件中时，我想修改数据。但是我发现当我修改与组件绑定的列表中的数据时，sider使用的原始列表会自动更改。

Vue.Draggable 中是否有某种同步机制？我只想更改组件中的对象数据。

我尝试使用 Chrome 浏览器中的 vue 扩展手动修改 list2 中的对象。它仍然会发生。所以我认为这可能不是我的代码中的错误。

addEntity (conditionID, entity) {
                if (!entity.forChoose) {

                }
                else {
                    let variable = 0;
                    for (let i = 0, len = this.whens.length; i < len; i++) {
                        if (this.whens[i].entity[0].id == entity.id) {
                            variable++;
                        }
                    }
                    this.whens[conditionID].entity[0].forChoose = false;
                    this.whens[conditionID].entity[0].variable = variable;
                    this.whens[conditionID].entity[0].name = entity.name + '-fake';
                }
            },

上面的代码是我将数据拖到组件中时的事件，并更改了一些变量。

尽管我对从中克隆数据的 Sider 中的原始数据没有做任何事情，但它仍然发生了变化。

有没有办法改变拖动的数据但不影响原始数据？请帮帮我，谢谢！

4

1 回答 1

0

我认为这是因为不变性而发生的。因此，您可以尝试在更改列表之前使用扩展运算符创建列表的新浅表副本。

如何使用扩展运算符（三点）

让 newArrayOfWhens = [...this.whens]

然后在您的代码中使用“newArrayOfWhens”数组

如果需要，您也可以创建深度克隆，但如果没有必要，请尽量避免使用它。您可以使用库调用“lodash”来轻松 完成 deepClone

于 2019-11-07T13:24:15.913 回答