Question

我的子组件模板有两个带有v模型的输入元素，如下所示。

<input v-model="user.name" />
<input v-model="user.email" />

props: {
   'account': {}
},
data: function() {
   return { user : this.account.user }
}

当输入字段中的文本发生更改时，正在更新预期的用户对象。但道具account.user也随着变化而更新。如何让它仅更新user对象并保持道具account.user原样？

Answer 1

这是因为在Javascript中，对象通过引用传递。执行user : this.account.user时，您将对象引用传递给user数据。这就是为什么当您编辑user数据时，account.user也会被编辑，它们会引用相同的对象。

您可以使用ES6传播运算符克隆它。

return { user : {...this.account.user} }

如果您不使用ES6，我建议您改用lodash clone。

return { user : _.clone(this.account.user) }

（顺便说一句，上面的克隆方法仅适用于浅层对象。对于深层嵌套的对象，请改用lodash cloneDeep。）

当本地副本更新时，vueJS-prop正在变异

1 个答案: