（一）iview的校验TypeError: Cannot read property 'validateField' of undefined"

1、问题描述

　　我是在本身封装了一个地址级联选择，而后想要每次改变了其中数据的时候，就进行一次单独校验，因此用到了iview对部分表单字段进行校验的方法validateField。其实一开始使用的时候是没有任何问题的，问题出现的缘由是我有多个表单，每次只显示一个表单，能够来回切换，以下图。我使用的是v-if来控制表单2和表单3的显示与隐藏，在我填完信息2之后进入到信息3，而后再点击回去信息2的时候，便报错了：TypeError: Cannot read property 'validateField' of undefined"

 

 

2、问题关键

 

　　我就很奇怪为何我一开始的校验是好的，返回来此表单就会出错呢，这对单个表单校验出错也太坑了吧。而后我打印了this.$refs.['formTwo']发现打印的是undefined，也就是说根本就不是表单校验出了问题，而是在于压根就找不到这个DOM对象。 

关键点在于，Vue 在更新 DOM 时是异步执行的，而我我使用了v-if来控制全部表单内容的显隐，而v-if它经过动态的摧毁DOM又构建，来控制元素的显隐。在我从新切回表单2的时候，原来的DOM早已被摧毁，此时又还未建立完成。

3、解决办法

　一、我想到的第一个办法是使用v-show；v-if是经过控制dom节点的存在与否来控制元素的显隐；v-show是经过控制DOM元素的display样式来到达显隐，以前在写富文本编辑切换的时候也出现什么东西undefined，错误一样的缘由也是我使用了v-if来控制每个富文本编辑，后来改成v-show以后，解决了问题。

而在这个地方，这样改随之而来的另外一个问题是我全部的表单在一开始的时候都出现了，我知道这确定是和个人判断条件写的不对有关，可我又不想改，因而有了第二个解决方法。

　　二、使用nextTick。为了在数据变化以后等待 Vue 完成更新 DOM，能够在数据变化以后当即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。因而我将该句单独校验表单的代码写在了里面，问题解决~   以下：

this.$nextTick(() => {
  this.$refs.['formTwo'].validateField('street')
});

4、相关知识点

　　v-if和v-show的区别（使用v-if的时候必定要好好考虑清楚！）

　　vue异步加载dom（参考：https://cn.vuejs.org/v2/guide/reactivity.html）

　　如何单独校验某一表单项