2019-07-25 分类：前端技术 作者：码云 阅读（436）
最近在做一个后台项目，采用的是vue全家桶和element-ui桌面端组件库，我也是第一次使用element-ui，所以遇到了很多问题，正如标题一样，所以有必要整理记录这次的采坑经验，为后续需要的小伙伴提供帮助，当然大佬可以略过。
问题描述：使用element开发我的后台系统，编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog>
绑定了数据data里的commentForm对象
为了在新增弹出框清空表单,使用了this.$refs.formName.resetFields()
每次第一次点击新增显示弹出框，都会报错
"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""
mouted加载table数据以后，隐藏的弹出框并没有编译渲染进dom里面。
所以 click="dialogFormVisible=true;resetForm('dlgForm')"click弹出的时候$refs并没有获取到dom元素导致'resetFields'of undefined
1 2 3 4 5 | resetForm(formName) { this.$nextTick(() => { this.$refs.formName.resetFields(); }) }, |
2、(如果是第一次就点击新增就没必要reset, 根据元素undefined判断)
1 2 3 | if (this.$refs.formName !== undefined) { this.$refs.formName.resetFields(); } |
注意：对DOM一系列的js操作最好都要放进Vue.nextTick()的回调函数中
「本文为原创文章，版权归码云笔记所有，欢迎分享本文，转载请保留出处！」
觉得文章有用就打赏一下文章作者
支付宝
微信
上一篇：图片布局的最全实现方式总结
恩，但是很多人还是只知其型不知其内涵
评：css世界笔记整理 带你深入了解css本质学习要认证
评：css世界笔记整理 带你深入了解css本质博主有心了 整理的很详细
评：css世界笔记整理 带你深入了解css本质css还是很有技术含量的了
评：css世界笔记整理 带你深入了解css本质恩，慢慢看，css虽然很简单，有些还是掌握不够透彻
评：css世界笔记整理 带你深入了解css本质文章很长 先mark
评：css世界笔记整理 带你深入了解css本质
共有 0 条评论 - 如何解决控制台element-ui报错Cannot read property ‘resetFields’ of undefined