Question

所以我有一个vue组件我用作编辑界面...
数据库里面有一个jsonified数组（不要问......我也不喜欢它），它必须是特定的格式......为了让管理员能够编辑这个字符串数组没有打破格式，我正在制作一个vue编辑组件，它会将各个部分分解成各种文本框......

我想有两个单独的变量 - 一个用于字符串数组IS，一个用于更改它们...第一个变量在保存更改时会更新...

我遇到的问题是，由于某些原因，当我更新其中一个变量时......其他变量不仅会发生变化......而且道具也会发生变化......
我的印象是组件无法改变他们的道具..？

特别是，数组看起来像这样：

[
    '1',
    '2'
    ['1','2','3','4']
]

当我在子阵列上做.splice()时，两个变量和道具都会更新......

一些示例代码......

Laravel刀片视图：
<editor :somearray={{ $someJsonifiedArray }}></editor>

组件道具/数据设置：

props: {
    somearray: {
        default: [],
        type: Array
    }
}

data(){
    return {
        editedArray: this.somearray,   // This is what will be saved
        wipArray: this.somearray       // This is what changes as they edit
    }
}

一些方法：

resetChanges(){
    this.wipArray = this.editedArray;
}

我可能错过了一些明显的东西......或者误解了事情的运作方式......

Answer 1

Javascript Array/Object is passed by reference, not by value!

如果你这样做

return {
    editedArray: this.somearray,   // This is what will be saved
    wipArray: this.somearray       // This is what changes as they edit
}

无论何时编辑editedArray或wipArray，您实际上都在编辑somearray，因为它们都会引用相同的数组/对象。

所以你必须克隆数组/ Object而不是直接传递它。克隆对象的最简单方法是使用spread operator（或者在某些情况下，需要deep cloning）。克隆数组最简单的方法是使用slice。

return {
    editedArray: {...this.somearray},   // This is what will be saved
    wipArray: {...this.somearray}       // This is what changes as they edit
}

Vue2组件以某种方式修改prop

1 个答案: