（一）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）

　　如何單獨校驗某一表單項