解決VUE項目使用Element-ui 下拉組件的驗證失效問題
問題描述：
在使用Element-ui組件做項目開發(fā)時候有可能會使用下拉框組件,如果下拉框組件的option選項是使用v-if指令遍歷的,
這樣也沒有問題,但是如果加上multiple屬性,也就是可以多選 就會出現下拉框驗證時失效問題.
問題現象：
如圖所示,明明已經選擇了選項,可是驗證還是為空,因此不能提交請求
解決思路：
如果說找遍組件里的方法都無法獲得我們適合使用的,那就要動用原生基本功了
console.log一下v-model在此組件上綁定的屬性,你發(fā)現你綁定的字符串(一般情況下都是String,這里就拿字符串舉例說明)打印出來卻是Array
所以如果驗證必填的話我們就直接判斷v-model在此組件上綁定的屬性的length是否大于0就好了;其他要求的話可以留言
思路驗證：
我有試驗過在rules增加type: ‘test',表面上看起來是可以的,但是打開控制臺,它已經報錯了: Unkown rule type text,如下圖:
竟然沒有type=text屬性! 好吧~只能繼續(xù)
既然多選設置之后輸出的是數組, 那就跟chexkbox一樣 ,我可以把v-model屬性改成[],然后rules里面的type: 'array'實驗一下,結果不報錯,但是驗證也不生效
可見Element還是有坑踩哦,我的項目緊急就先原生解決了,哪天找到組件解決辦法我會及時更新的,當然如果誰知道解決辦法也請分享給我哦~歡迎技術交流
解決代碼
if (this.form.STORE_PROVINCE.length === 0 || this.form.STORE_PROVINCE.length == '') {
this.$message.error('請選擇至少一個區(qū)域')
return false
} else {
// 要執(zhí)行的代碼
}
以上便可解決了。
補充知識：element ui表單驗證select既獲取label又獲取value
html部分
<el-form-item label="所屬公司" prop="comName">
<el-select v-model="ruleForm.comName" placeholder="請選擇所屬公司" @change="selectGet">
<el-option v-for="item in ruleForm.options2" :key="item.id" :value="item.id" :label="item.comName"></el-option>
</el-select>
</el-form-item>
js部分
//獲取selectlabel值
selectGet(vId){
let obj = {};
obj = this.ruleForm.options2.find((item)=>{//this.ruleForm
return item.id === vId;//篩選出匹配數據
});
console.log(obj.comName);//我這邊的name就是對應label的
},
在data return里邊定義
data(){
return{
ruleForm:{
options:[
{id:1,comName:'BEIJING'},
{id:2,comName:'TIANJIN'}
]
}
}
}
以上這篇解決VUE項目使用Element-ui 下拉組件的驗證失效問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了前端漸進式框架VUE的相關資料，文中講解的非常細致，幫助大家開始學習VUE，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了Vue+axios 實現http攔截及路由攔截 ,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
Fragment 是 Vue 3 中的新特性,允許一個組件模板返回多個根節(jié)點,與傳統(tǒng)方式不同,不再需要一個額外的 DOM 元素來包裹所有內容,本文將詳細介紹 Fragment 的概念、使用場景、優(yōu)點以及可能遇到的問題,需要的朋友可以參考下2024-08-08
vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue-router 2.0 跳轉之router.push()用法說明
這篇文章主要介紹了vue-router 2.0 跳轉之router.push()用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue項目中實現錨點定位，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本文主要介紹了如何監(jiān)聽Vue項目報錯的4種方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue?2源碼閱讀?Provide?Inject?依賴注入詳解
這篇文章主要為大家介紹了Vue?2源碼閱讀?Provide?Inject?依賴注入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
本文主要對vue 用$emit 與 $on 來進行組件之間的數據傳輸。重點給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，感興趣的朋友一起看看2018-05-05