Cannot read property 'resetFields' of undefined 问题及引申
2024-08-27 15:53:21
问题描述: 使用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、($nextTick dom下一次更新之后)
resetForm(formName) {
this.$nextTick(()=>{
this.$refs[formName].resetFields();
})
},
2、(如果是第一次就点击新增就没必要reset, 根据元素undefined判断)
if (this.$refs[formName] !== undefined) {
this.$refs[formName].resetFields();
}
注意事项:对DOM一系列的js操作最好都要放进Vue.nextTick()的回调函数中
最新文章
- Tomcat发布项目方法
- Word 宏命令大全
- Nginx 1.10.2 发布,高性能 Web 服务器
- 在spring中使用webservice(Restful风格)
- HttpContext.Current.Cache使用文件依赖问题
- jQuery效果-滑动
- TVS_压敏电阻等保护类器件的布局问题
- UVA 1358 - Generator(dp+高斯消元+KMP)
- Alamofire源码解读系列(五)之结果封装(Result)
- Hadoop(十七)之MapReduce作业配置与Mapper和Reducer类
- PHP 常用字符串函数
- js中的一元加法和一元减法
- TCP/UDP 协议,和 HTTP、FTP、SMTP,区别及应用场景
- 关于ARM Linux下的SD卡及U盘的挂载问题
- Ubuntu16下配置支持Windows访问的samba共享
- OpenOffice将MS docx转换成pdf文件偶数页眉不显示问题解决办法
- 75道阿里Java面试题,你能答上几道?
- 【UOJ #221】【NOI 2016】循环之美
- 推荐20个很有帮助的web前端开发教程
- tp表单的提交与验证