我有一个显示用户名和电子邮件地址的组件。我打开一个新对话框,使用户可以编辑名称和电子邮件。编辑对话框的用户数据将作为道具传递给该对话框。对话框的编辑文本字段已经预先填写了用于编辑的当前用户名/电子邮件。当用户编辑名称但在对话框上单击“取消”,然后再次打开对话框时,更改仍然存在。它似乎不接受作为道具传递的价值?我该如何解决?
<template>
<div>
<v-dialog v-model="EditDialog" persistent max-width="400px" >
<Dialog :user="user" height="400px" />
</v-dialog>
<other stuff on page>
</div>
</template>
对话
<v-text-field
label="Name"
v-model="user.name"
filled
placeholder="Name"
></v-text-field>
您可以使用v-model指令在表单输入,文本区域和选择元素上创建双向数据绑定。
-来自Vue docs
[基本上,不是像通常那样仅在显式分配时才更新变量值,而是当数据被修改时,v-model
在根实例处自动更新。要理解这实际上意味着什么,如果您在开发工具的Vue选项卡中观看user.name
,您会看到在用户在文本字段中键入字符串时已为其分配了字符串。当用户单击cancel
时,输入的数据已保存,并且不会还原。
那么如何取消不需要的更改?
在进行任何更改之前简单地创建数据缓存,并在调用cancel
时使用它来还原数据。
例如,从数据库中提取数据后:
.then(() => (this.dataCache = Object.assign({}, this.user)));
在dataCache: {}
钩子中将data
创建为空对象。
然后类似:
$on('cancelUserChanges', () => {
this.user = Object.assign({}, this.dataCache;
});
请注意,在将此修复程序与数组一起使用时,可能会遇到问题,因为
Object.assign仅对键和值进行浅表复制,这意味着如果对象中的值之一是另一个对象或数组,则它与原始对象上的引用相同。
-来自@GarrettJohnson对object assign does not copy correctly的回答>
为了通过深度克隆对象来解决此问题,如该答案所述,您可以使用lodash的cloneDeep函数或JSON.parse( JSON.stringify( obj ) )
之类的东西(但是仅适用于JSON支持的基本类型)。] >