說起v-show和v-if,進行前端開發的大家一定不會陌生,他們都是用來控制標簽元素的顯示與隱藏的,他們的區別就是v-show會把標簽渲染出來,只是會隱藏起來,相當於visibility:hidden和opacity:0;的作用,而v-if如果為false的話,則標簽都不會被渲染,相當於display:none;的作用,那么他們到底會和表單驗證產生什么化學反應呢,下面就來看看我踩的這個坑吧。
這里我們可以看到element 上對於validate的一個解釋,也就是他會幫我們驗證表單里面的數據是否滿足我們設定好的驗證規則,全部滿足規則才能通過,並且執行之后的方法,乍一聽上去好像沒什么關系,但是我們的需求是這樣的,當點擊一個按鈕的時候,表單變成另外一種樣式,也就需要進行另一次表單驗證,哪一種樣式有值的話,就默認顯示哪種樣式。我之前是通過v-show來控制標簽的顯示與隱藏的,但是后來發現,當我點擊了按鈕之后,即如果我默認是第二種樣式的時候,這時候我的表單驗證就通過不了,即我點擊了提交按鈕很可能沒有反應,這令我非常困惑,於是就開始了各種找bug。
最后,我才發現,如果默認是第二種情況的話,他其實就已經把第一種樣式也渲染出來了,只不過是把第一種隱藏了,但是他表單驗證是不認這些的,只要你渲染過了他就會進行表單驗證,而你第一種樣式又被隱藏了,所以驗證一直通不過,后面的就被阻斷了(這就是我們用v-show引起的,因為他默認會把元素渲染出來),所以,把v-show改成v-if就可以了。