浅谈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 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
package.json各个属性说明详解
Mar 11 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
团员个人的自我评价
2013/12/02 职场文书
产品生产计划书
2014/05/07 职场文书
物业管理工作方案
2014/05/10 职场文书
论文诚信承诺书
2014/05/23 职场文书
2014年保育员工作总结
2014/12/02 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers