浅谈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类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
详解javascript高级定时器
Dec 31 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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与javascript的两种交互方式
2006/10/09 PHP
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHP实现文件下载详解
2014/11/27 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
php中final关键字用法分析
2016/12/07 PHP
仿百度联盟对联广告实现代码
2014/08/30 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
vue使用codemirror的两种用法
2019/08/27 Javascript
layui使用label标签的方法
2019/09/14 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python实现ID3决策树算法
2017/12/20 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Python tcp传输代码实例解析
2020/03/18 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
string = null 和string = ''的区别
2013/04/28 面试题
工伤事故赔偿协议书范文
2014/09/24 职场文书
师范生小学见习总结
2015/06/23 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript