代码之家 › 专栏 › 技术社区 › user1436631

vueJS-当本地副本更新时,属性正在发生变化

vue-component vuejs2 vue.js

user1436631 · 技术社区 · 7 年前

我的子组件模板有两个输入元素,v型模型如下。

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

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

当输入字段中的文本发生任何更改时,都会更新预期的用户对象。但是道具 account.user 也正在更新更改。我怎样才能更新 user 反对并保留道具 账户使用者 就这样?

1 回复 | 直到 7 年前

Jacob Goh 7 年前

这是因为在Javascript中,对象是通过引用传递的。当你这样做的时候 user : this.account.user ,您正在将对象引用传递给 user 数据这就是为什么当你编辑 使用者 数据 account.user 也被编辑,它们引用相同的对象。

您可以使用ES6 spread操作符克隆它。

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

如果您没有使用ES6,我建议您使用 lodash clone 相反

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

(顺便说一句,上述克隆方法仅适用于浅层对象。对于嵌套较深的对象,请改用lodash cloneDeep。)

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

4 月前

Ben Foltz · 更新/删除递归子组件

5 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

5 月前

Felix · 更改vuetify v-field标签字体大小

6 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

6 月前

CentralDev · 如何导出和导入js文件?

9 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

9 月前

gespinha · 当元素不再可见时,如何更改ref元素?

10 月前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

10 月前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

11 月前