重置表单验证 清除表单校验信息

重置表单验证 清除表单校验信息

提交表单验证的时间经常遇见的一个问题 再次打开时表单验证依旧存在,这种就很烦,用户体验有点差,
在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原来的数据和验证信息一直保留
比方说重复打开
百度的时候,方法有很多,基本都是改js文件,
无意中看见一个超级简单的方法

Vue给了一个特殊属性 :key ,详细可以参照vue文档,

Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 可以用于强制替换元素/组件而不是重复使用它。只需要保证每次生成的 key 值不一样,就会重新渲染。

在这里插入图片描述

用 +new Date() 时间戳生成一个每次都不一样的值,这样就可以实现每次重新渲染而不是重复使用。 但是会有一些性能问题,总体来说,个人感觉比较方便吧

new Date 前面加上 + 是把它转换成Number类型。

原文参照地址 http://www.ihref.com/read-18437.html
参照的这个老哥的
性能问题就是输入框可能只能输入一次,因为每次输入都会重置一下key值,每输入一次就会失焦。

this.$nextTick(() => {
                this.$refs.addform.resetFields(); //等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields(),去除验证
            });

简单一点的方法使用
this.$nextTick 每次打开的时候调用一次
element-UI之表单校验—关闭弹窗后,重新打开弹窗,清除提示消息

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值