快速解决Vue、element-ui的resetFields()方法重置表单无效的问题


Posted in Javascript onAugust 12, 2020

问题:

使用this.$ref['form'] .resetFields()无法重置表单项

原因:

1.没有给表单添加ref属性

<el-form ref="form"></el-form>

2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
 <el-form-item label="活动名称" prop="name">
  <el-input v-model="sizeForm.name"></el-input>
 </el-form-item>
</el-form>

3.还有一个经常出现这种问题的场景是,当使用vuex的时候,新建表单与编辑表单复用,此时上述属性跟方法都添加了也无法达到清除表单的效果。

此时我们再重新看一下element-ui的官方文档

方法名 说明
resetField 对该表单项进行重置,将其值重置为初始值并移除校验结果
clearValidate 移除该表单项的校验结果

重点:resetField()方法不是将表单重置为空,而是重置为初始值

所以当我们打开新建表单的时候,表单项绑定的属性值为空,在提交表单后,表单项绑定的值不为空,此时再打开新建表单是会有上一次的值出现,此时resetField()方法是无法清空表单的,因为在这次操作的时候,属性初始值就不为空。

解决方法:

在提交表单成功后对绑定的值进行方法重置

//  重置表单项属性
resetForm () {
  return {
    remark: '',
    name: ''
  }
}
 
//  提交表单成功后重新给属性赋值
submit () {
  //......调用成功
  let self = this
  let query = self.resetForm()
  self.updateForm({ //此方法是自定义的vuex的action方法,大家可根据实际应用场景定义重置表单方法
    form: query
  )}
  self.$ref['form'].resetFields()  // 此时再调用resetFields()方法是为了清除表单验证而出现的错误
}

在对属性进行重置后执行resetFields方法,是因为对属性重置为空时,可能会触发表单规则的验证,此时执行resetFields会移除校验结果

补充知识:vue+element-ui this.$refs[‘‘].resetFields() 重置表单数据不生效问题

element 的 Form 组件提供了表单验证的功能,需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名。

有两点需要注意:

1.要有对应的 ref,且名字一致,表明重置哪个表单。

2.prop 设置的字段名要和 v-model 绑定的字段名一致,否则重置表单或进行自定义校验规则时不会生效。

仅使用重置功能时具体校验规则不必填,但要重置的字段一定要有对应的 prop。

以上这篇快速解决Vue、element-ui的resetFields()方法重置表单无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
微信小程序入门教程
Nov 18 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
vue-router 2.0 跳转之router.push()用法说明
Aug 12 #Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 #Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 #Javascript
VsCode里的Vue模板的实现
Aug 12 #Javascript
typescript配置alias的详细步骤
Aug 12 #Javascript
js实现表格单列按字母排序
Aug 12 #Javascript
javascript的hashCode函数实现代码小结
Aug 11 #Javascript
You might like
PHP之生成GIF动画的实现方法
2013/06/07 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python中查看变量内存地址的方法
2015/05/05 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
.NET概念性的面试题
2012/02/29 面试题
实习教师自我鉴定
2013/12/09 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
干部个人对照检查材料
2014/08/25 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
教师求职自荐信范文
2015/03/04 职场文书
聘任书的格式及模板
2019/10/28 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
box-shadow单边阴影的实现
2023/05/21 HTML / CSS