浅谈vue中resetFields()使用注意事项
this.$refs.frmAdd.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()使用注意事项就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue响应式系统之observe、watcher、dep的源码解析
这篇文章主要介绍了vue响应式系统之observe、watcher、dep的源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了el-tree懒加载的实现以及局部刷新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
el-table-column叠加el-popover使用示例小结
el-table-column有一列展示多个tag信息,实现点击tag展示tag信息以及tag对应的详细信息,本文通过示例代码介绍el-table-column叠加el-popover使用示例小结,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了vue+echarts定时重新绘制以达到刷新的动效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
今天小编就为大家分享一篇关于vue.js中实现方法内某些代码延时执行，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。这篇文章主要介绍了快速了解vue-cli 3.0 新特性,需要的朋友可以参考下2018-02-02
Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解
在Vue指令中,最经常被用于做逻辑操作的指令,下面这篇文章主要给大家介绍了关于Vue中判断语句与循环语句基础用法及v-if和v-for注意事项的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
最近上线一个项目,手机网站进行调起支付宝App支付,做起来还是满顺手的,在此做个记录,这篇文章主要给大家介绍了关于前端H5微信支付宝支付实现方法的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue tree封装一个可选的树组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
今天小编就为大家分享一篇解决vue 打包发布去#和页面空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论