对话框保持更改的值

Question

我有一个显示用户名和电子邮件地址的组件。我打开了一个新对话框，用户可以编辑姓名和电子邮件。编辑对话框的用户数据作为道具传递给对话框。对话框的编辑文本字段已经预先填充了当前用户名/电子邮件以进行编辑。当用户编辑名称，但单击对话框上的"取消"，然后再次打开对话框时，更改仍然存在。它似乎没有接受作为道具传递的值？我该怎么解决这个问题？

<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>

Answer 1

1. 在打开对话框之前，将要在对话框中编辑的道具复制到对话框数据部分
2. 使用复制的道具进行编辑(将它们绑定到编辑器组件(
3. 对话框确认后，将编辑后的道具复制回原始道具

Answer 2

您可以使用v-model指令在表单输入、文本区域和选择元素上创建双向数据绑定。

来自Vue文档

基本上，v-model在修改数据时自动更新根实例，而不是像常见的那样仅在显式分配时更新变量值。为了理解这实际上意味着什么，如果您在开发工具的Vue选项卡中观察user.name，您会看到当用户在文本字段中键入字符串时，它被分配了字符串。当用户单击cancel时，输入的数据已经保存，并且不会恢复。

那么，如何取消不需要的更改呢？

只需在进行任何更改之前创建一个数据缓存，并在调用cancel时使用它来恢复数据。

例如，从数据库中提取数据后：

.then(() => (this.dataCache = Object.assign({}, this.user)));

已经在CCD_ 6钩子中创建了CCD_。

然后类似于：

$on('cancelUserChanges', () => {
this.user = Object.assign({}, this.dataCache;
});

---

请注意，在对阵列使用此修复程序时，您可能会遇到问题，因为

Object.assign只对键和值进行浅层复制，这意味着如果对象中的一个值是另一个对象或数组，则它与原始对象上的引用相同。

来自@GarrettJohnson对对象分配的回答没有正确复制

为了通过深度克隆对象来解决这个问题，如答案中所述，您可以使用类似于lodash的cloneDeep函数或JSON.parse( JSON.stringify( obj ) )的函数(但是，它只适用于JSON支持的基元类型(。