vue + element dialog弹框 无法重置表单

遇到的现象:在业务处理中,发现先打开编辑弹框,关闭后在打开创建弹框(创建、编辑为同一个组件),弹框内会有上次打开的数据,但是在每次关闭弹框的时候重置了表单的啊!

原因:form表单的重置是以页面初始值作为重置标准,如果先打开的是编辑,那么重置是以弹框打开时的数据作为标准,即表单的数据为编辑时的数据

解决思路:
1. 每次打开弹框时,将表单数据重置为初始化值(因为创建、编辑为同一个组件,实际业务中会多次打开,只在data中声明二次打开时不会触发)

methods: {
    openDialog() {
      this.formData = {
        name: '',
        type: [],
        vaild: true
      }
      this.dialogVisible = true
    }
},

2. 用 nextTick 处理一下form的数据

methods: {
    initFormData() {
      axios.get('/user?ID=12345').then(function (response) {
        let that = this
        // this.$nextTick()函数作用是等页面的数据更新完成以后,它再执行内部回调函数中的逻辑
        this.$nextTick(() => {
            that.formData = response
        })
      }).catch(function (error) {
        console.log(error)
      })
    }
},

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值