浅谈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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
bootstrap table表格插件之服务器端分页实例代码
Sep 12 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
Javascript的&&和||的另类用法
2014/07/23 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
高中生期末评语大全
2014/01/28 职场文书
医生辞职信范文
2015/03/02 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
律政俏佳人观后感
2015/06/09 职场文书
大学开学感言
2015/08/01 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书