浅谈vue中resetFields()使用注意事项


Posted in Javascript onAugust 12, 2020

this.$refs.frmAdd.resetFields();这句在使用中有些时候不会有啥问题,但有时候就会出问题,而且特别难缠,我原来这么使用就没问题啊,怎么这里就会有问题,查找各种资料总结得出:

第一种情况:放在弹框刚准备弹出的时候

浅谈vue中resetFields()使用注意事项

第二种情况:放在弹框关闭方法@close中

发现上次报红框的地方仍然在,并未重置

最终解决方案:

this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.refs.frmAdd.resetFields(); });

可以放在准备开始弹出弹框时的方法中

补充知识:vue-element-ui 中 form resetFields并没有清空表单

问题背景

vue-element-ui 中 form中有个清空表单的方法,即假如给表单一个ref='form', 则清空表单的方法为this.$refs['form'].resetFields()

可当我在dialog组件中用这个方法的时候,这就出现问题了,居然清空不了~~~~~

问题所在

问题的本质是因为你编辑时,第一次打开dialog的时候给表单绑定的form赋值了,这时候这个form的初始值就变成了你所赋值的值,所以resetFields的时候,会将form对应的每个值重置到初始值,这时候的初始值就是你编辑时赋值的那个值, 而不是在data里声明的初始值,

如表单绑定的值为:

form: {
 age: 0,
 name: ''
}

但在你打开dialog编辑的时候,你又对它进行赋值,如

this.form = {
 age:23,
 name:"lala"
}

这个时候form表单会默认这个新赋的值为初始值

解决

解决方式是,等dialog已经初始化之后再给form赋值,也就是

this.$nextTick(() => { // 这里开始赋值 this.form.xxx = xxx; })

以上这篇浅谈vue中resetFields()使用注意事项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
微信小程序实现文件预览
Oct 22 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 #Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 #Javascript
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
You might like
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
php经典趣味算法实例代码
2020/01/21 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
日期 时间js控件
2009/05/07 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python机器学习实现决策树
2019/11/11 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python list和str互转的实现示例
2020/11/16 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
经典c++面试题六
2012/01/18 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
中职生自荐信
2013/10/13 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
分享python函数常见关键字
2022/04/26 Python