v-if和v-show 導致elementui 表單驗證bug
阿新 • • 發佈：2020-07-29
使用el-form來做表單驗證時，有時候選擇的條件不同，展示的el-form-item也不一樣，
這時候就需要控制輸入框的展示與隱藏
特別是再tab標籤切換的時候遇到最多，每個tab下面顯示不通的el-form-item
我使用v-show時，提交表單時會遇到validate驗證不通過，因為雖然v-show=false了，但實際是渲染了dom的，也參與了表單驗證。
所以我又改成了v-if
改後又遇到另一個bug
相同的兩個el-form-item，有一個驗證失效，開始我還以為是prop沒有寫對，認真對比後發現，是正確的
，接著又繼續找解決辦法。。。。
最後是在el-form-item 上加key值解決的
上程式碼：
key值保證唯一性就可以了
清空驗證：
this.$nextTick(()=>{ this.$refs["discount_AddForm"].clearValidate(); }); 重置驗證表單： if(this.$refs["discount_AddForm"]){ //重置表單 this.$refs["discount_AddForm"].resetFields(); this.$refs["discount_AddForm"].clearValidate();}