ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的解决方法

ฅQSω[*邱╭

已于 2023-07-25 09:54:12 修改

阅读量5.1k

点赞数 2

分类专栏： js vue 文章标签： vue.js javascript

于 2021-11-29 11:33:08 首次发布

本文链接：https://blog.csdn.net/qq_45030898/article/details/121605705

版权

js 同时被 2 个专栏收录

93 篇文章

订阅专栏

vue

70 篇文章

订阅专栏

本文主要讨论了在Vue.js应用中遇到的一个问题：在使用Dialog进行表单新增操作时，表单数据在多次使用后出现错误的保留和同步。作者详细介绍了问题的现象，即二次打开表单时会保留之前的数据，并导致数据重复插入。为了解决这个问题，作者提出了两种解决方案：一是通过在打开Dialog的按钮绑定方法中重置表单对象；二是利用Vue的watch监听来动态重置表单数据，确保每次打开表单都是干净的状态。这两种方法都被证实是有效的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需求分析

需求是点击新增表单，弹出dialog窗口，确认后页面显示新增的数据

2.出现的问题

第一次新增表单页面

结果显示：

貌似也没有问题，我们第二次进入新增表单

第一个问题就来了，新增表单默认有上次新增表单的值，更严重的问题来了！！！再次修改内容，上次添加的表单数据也会跟着改变

结果增加了两个相同的数据（上个数据被改变）

3.解决方法

在打开dialog的按钮绑定方法，重置表单对象

亲测有效

补充方法(2023-7-25),现在我一般喜欢用watch监听来进行这类dialog的重置问题

  watch:{
    dialogFormVisible:{
      handler(newVal) {
        if(!newVal) {
          this.addTemplateform =  this.$options.data().addTemplateform
        }
      }
    }
  },