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

 

 

通过测试发如今update钩子执行以后再执行resetFields就不会报错了。