Vue+elementUI开发中 Cannot read property 'resetFields' of undefined 问题解决以及原因分析

本人开发的系统中有个添加数据与编辑数据的功能。为了减少代码量,两者使用了同一个dialog,通过不同按钮点击使用对应的方案进行显示。

对了方便,本人在添加数据的按钮的click事件中直接写入了resetFields。

之后正常运行过一段时间,但是就在最近(添加了很多代码)开始报错:

TypeError: Cannot read property 'resetFields' of undefined

同时我发现,只要显示过一次dialog,后面就不会报错了。所以我可以确定是因为代码量过大,对应的对象来不及生成,从而导致了读取了空对象。

所以我的解决方法就是:

resetForm(formName)

{ if (this.$refs[formName]!==undefined) {

     this.$refs[formName].resetFields(); }

}

通过判断对象,来避免错误(因为只有在新增数据会resetFields,但实际上第一次点击新增按钮是不需要执行resetFields的。而之后也不会报错了,所以这个解决方案刚好适合我)

网上有另一个解决方案,但是我试了一下不行

http://www.cnblogs.com/weiqinl/p/6708993.html 

俗话说得好,知其然而知其所以然。所以我看以下blog

http://www.cnblogs.com/fly_dragon/p/6220273.html


推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 22,953评论 1 45
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 467评论 0 3
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    WhaleFall_丶阅读 1,917评论 0 7
  • 晚餐喝了一杯奶茶,偶买噶!睡不着啊! 好久没有写点什么了,胡乱记录一下此刻的心情吧。 下午17:00点,小番茄喝完...
    太阳花hj阅读 168评论 0 1