Vue—nextTick对于重置表单的坑

需求

需要清空表单中遗留的内容

需求解决方法

采用
this.nextTick(() =>{ this.$refs['form'].resetFields() }
并在点击添加按钮的时候，调用此方法
form请参照自己的ref

对于子组件表单

该方法在子组件使用中没有问题，且在首次加载时并不报错

对于同组件表单

但是在同项目中，采用了同组件表单，即
<el-dialog :visable.sync='open'>
点击按钮将open变为rue时，产生报错

TypeError: Cannot read property ‘resetFields’ of undefined

经过测试，发现该现象只出现在同组件表单中，并在控制台中Elements查看源码的时候发现，在首次加载页面的时候
<el-dialog :visable.sync='open'>
此种方法的表单在没有点击按钮的情况下，是没有渲染的
这就导致了
this.nextTick(() =>{ this.$refs['form'].resetFields() }
该方法找不到这个form

问题解决方法

所以提出2种解决方法，
第一种：
采用先渲染，在清空的方法

this.open = true
this.nextTick(() =>{
	this.$refs['form'].resetFields()
	}

第二种：
判断来自数据中的form是否为undefined，直接跳过第一次的清空

if(this.$refs['form'] !== undefined){
	this.$refs['form'].resetFields()
	}

以上仅记录个人见解，且目前并没有业务逻辑错误产生，有错希望各位指正，欢迎互相探讨。