将Vue实例数据分配给非反应变量

Question

我有一个表单，它有一个模态，我用它来填充表单中的数组。每次提交模态时，我都会将Vue对象推送到主表单上的数组中。我面临的问题是，数组中的每个项都是链接的，当我编辑一个项时，数组中所有项都会被编辑。

data: {
myForm: {
form_element: null,
my_array: [],
},
modalForm: {
modalFormElement: null,
},
},
methods: {
addRow(){
this.myForm.my_array.push(this.modalForm);
},
},

首先将此.modalForm分配给变量不起作用。

Answer 1

这是一个参考问题。modalForm对象(即this.modalForm(引用内存中的相同位置。当您将this.modalForm推送到数组中时，更改对象属性的值将更改其余属性。为了防止此问题，请在将modalForm对象推送到数组之前复制它。

data: {
...
modalForm: {
modalFormElement: null,
},
},
methods: {
addRow(){ //
this.myForm.my_array.push({...this.modalForm}); // shallow clone the object using the es2015 spread syntax
},
},

以下是在JavaScript中克隆对象的其他方法，但在我的示例中，我将坚持使用es2015 spread语法。有关对象的javascript引用的更多信息，请参阅此