Vue.set具有相同引用的两个不同对象属性

Question

我试图使用Vue.set函数将一个对象添加到数组中，但它将该项添加到另一个具有相同数组属性的对象中。

data() {
return {
...
form: {
...
client_a: {
...
items: []
},
client_b: {
...
items: []
},
}
};
},

当我这样做时：(注意，我正在向client_a.items添加一个项目(

this.$set(this.form.client_a.items, 'key', { prop1: '', prop2: '' })

则client_b.items var具有与client_a 相同的值

console.log(this.form.client_b.items)

输出

[
'key': { prop1: '', prop2: '' }
]

这个.form.client_b.items的预期结果是

[]

因为我没有在中添加任何内容

代码示例：https://codesandbox.io/s/proud-fast-bjvyr

Answer 1

@skirtle指出，base_client.functions-属性是相同的数组。beforeMount():中的一个简单修复

beforeMount() {
this.form.client_a = {
...this.base_client,
functions: []
}
this.form.client_b = {
...this.base_client,
functions: []
}
this.form.functions = [
{
key: "key-1",
name: "Test"
}
];
}

不太优雅，但应该可以。另一种方法是使base_client成为一个具有返回值的方法，每次生成一个新的returns-数组。