对话框保持更改的值

问题描述 投票:0回答:2

我有一个显示用户名和电子邮件地址的组件。我打开一个新对话框,使用户可以编辑名称和电子邮件。编辑对话框的用户数据将作为道具传递给该对话框。对话框的编辑文本字段已经预先填写了用于编辑的当前用户名/电子邮件。当用户编辑名称但在对话框上单击“取消”,然后再次打开对话框时,更改仍然存在。它似乎不接受作为道具传递的价值?我该如何解决?

  <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>
javascript vue.js vue-component vuetify.js
2个回答
0
投票
  1. 在打开对话框之前,将要在对话框中编辑的道具复制到对话框data部分。
  2. 使用复制的道具进行编辑(将其绑定到编辑器组件)。
  3. 在确认对话框后,将编辑的道具复制回原始道具。

0
投票

您可以使用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支持的基本类型)。] >

© www.soinside.com 2019 - 2024. All rights reserved.