解決Element-u的 el-form 使用 v-if校驗失靈問題

在 element-ui 的校驗過程中，鑑於使用自帶的校驗方式，繁瑣且麻煩，因而使用了 element-ui-verify 的外掛。但是現在碰到一個新的問題，不知道具體是哪塊問題，看了兩個的原始碼，想使用 element-ui 自帶的 addFields 時，無法生效，因而是內部方法，外部無法拿到 【此處先記一筆，看看後期這塊是否是解決的要點】。

主要出現的問題是，使用了 v-if 時，導致無法有效被 element-ui 知曉，而報 [Element Warn]please pass correct props! ，意思就是說使用 v-if

<template v-if="editMobile">
   <el-row type="flex" :gutter="2" v-if="editMobile">
     <el-col :span="20">
        <el-form-item
           ref="captcha"
           label="驗證碼："
           prop="captcha"
           verify
          :length="4"
         >
           <el-input v-model="form.captcha" placeholder="可以點選圖片更換驗證碼" class="personal-input__append">
             <template slot="append">
               <img :src="captchaUrl" alt="驗證碼" @click="createCaptchaUrl">
             </template>
           </el-input>
         </el-form-item>
      </el-col>
   </el-row>
</template>
 

使用 v-if="editMobile" 時，有時作用在 template 時，校驗馬上生效，而自己又不像這樣，因而放在 el-form-item 上時，可以有效避開，但是卻會在校驗時，報上訴錯誤。這塊還真有必要好好糾結一番了

經過查證發現需要給 v-if 的元素新增唯一鍵 key 即可解決

參考資料

• el-form動態表單驗證（v-if、v-show導致校驗失效的bug）
• element-ui 表單渲染v-if元件，驗證報錯
• vue + element,v-if和validate搭配出坑
• 表單驗證的一個bug #3604