Cannot read property 'resetFields' of undefined 问题及引申
问题描述: 使用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()的回调函数中
Cannot read property 'resetFields' of undefined 问题及引申的更多相关文章
- Vue+elementUI开发中 Cannot read property 'resetFields' of undefined 问题解决以及原因分析
本人开发的系统中有个添加数据与编辑数据的功能.为了减少代码量,两者使用了同一个dialog,通过不同按钮点击使用对应的方案进行显示. 对了方便,本人在添加数据的按钮的click事件中直接写入了rese ...
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- Vue-element 的 resetFields of undefined报错
触发场景:添加表单弹框,当我信息保存成功后会报 [Vue warn]: Error in event handler for "click": "TypeError: C ...
- easyui Datagrid查询报错Uncaught TypeError:Cannot read property 'length' of undefined
1.问题描述 easyui中datagrid执行loadData方法出现如下异常:Cannot read property 'length' of undefined 2.一开始怀疑是js或者页面的问 ...
- vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined
我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...
- Uncaught TypeError: Cannot read property 'msie' of undefined
因为图方便,抄了别人写的一个jquerry插件,运行时“var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ...
- SharePoint 2013 Error - TypeError: Unable to get property 'replace' of undefined or null reference
错误信息 TypeError: Unable to get property ‘replace’ of undefined or null referenceTypeError: Unable to ...
- jquery错误: Cannot read property ‘msie’ of undefined
背景 Web application, 引用了jquery 1.10.2和fancybox 1.3.4 现象 访问页面遭遇Cannot read property ‘msie’ of undefine ...
- easyui使用时出现这个Uncaught TypeError: Cannot read property 'combo' of undefined
easyui使用时出现这个Uncaught TypeError: Cannot read property 'nodeName' of undefined 最后检查发现是必须给select一个id,光 ...
随机推荐
- windows 系统禁止使用 U 盘的方法
windows 系统禁止使用 U 盘的方法 最简单的办法: 注册表 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentCntrolSet\Services\USBSTOR] 将名为 ...
- 封装一个ExcelHelper,方便将Excel直接转成Datatable对象
public class ExcelHelper { /// <summary> /// Excel转换成DataTable /// </summary> /// <pa ...
- Bootstrap4用法
#Bootstrap4 ## 网格系统- .col- 针对所有设备- .col-sm- 平板 - 屏幕宽度等于或大于 576px- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)- ...
- Ubuntu-C++环境设置
在学习C++,顺便想熟悉一下Linux下开发 所以就开始搭建Linux环境 第一步就是下载虚拟机和Ubuntu 虚拟机 vm 12.1 Ubuntu 16 VM安装省略 Ubuntu安装省略 下面是我 ...
- Java IO学习--输入输出流
一.Java IO的定义 I/O:输入输出系统,由输入输出控制系统和外围设备两部分组成. Java中I/O操作主要是指使用Java进行输入,输出操作. Java所有的I/O机制都是基于数据流进行输入输 ...
- 九度OJ--Q1163
import java.util.ArrayList;import java.util.Scanner; /* * 题目描述: * 输入一个整数n(2<=n<=10000),要求输出所有从 ...
- [译]如何撤销git仓库里的所有修改?
原文来源:https://stackoverflow.com/questions/29007821/git-checkout-all-the-files 问: 如何撤销我在我git仓库所做的所有修改? ...
- 面试题中经常遇到的SQL题:删除重复数据,保留其中一条
如题,解决思路如下: 1.首先我们需要找出拥有重复数据的记录 ---以name字段分组 select Name,COUNT(Name) as [count] from Permission group ...
- Thread.currentThread().getContextClassLoader().loadClass(className)和Class.forName(className)的区别
一.正文: 有去看开源框架的童鞋,应该会经常看到如下代码:Thread.currentThread().getContextClassLoader().loadClass(className),那这个 ...
- [STL] 遍历删除两个vector中交集
#include <vector> #include <string> #include <algorithm> using namespace std; int ...