這篇文章主要介紹了解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示:
我們需要的是選擇之后才觸發(fā),但是這樣寫你會發(fā)現(xiàn),頁面初始化的時候會觸發(fā)多次,選擇之后又會觸發(fā)多次,原因是我們用錯了標(biāo)簽,應(yīng)該用 @change="selectChange()
這樣寫就可以了,v-bind的縮寫是:,v-on的縮寫是@,這里是觸發(fā)事件,應(yīng)該用@,
補充知識: 為elment-ui的el-select選擇器添加onblur失焦事件產(chǎn)生的問題
如下所示:
用戶編號:
<el-select
:no-match-text="msg"
:popper-append-to-body=false
placeholder='請選擇'
v-model="value" filterable popper-class='contentadd_select'
ref='select'>
<el-option
v-for="item in users"
:key="item.accont"
:label="item.accont"
:value="item.accont">
所需要實現(xiàn)的功能是當(dāng)查詢輸入時,如果用戶輸入的數(shù)據(jù)是選項里面不匹配的,則返回顯示無匹配數(shù)據(jù)。
JS代碼如下
this.$refs.select.$refs.reference.$refs.input.onblur = ()=>{
let haveitem=0;
for(let i=0;i<this.users.length;i++){
if(this.$refs.select.query==this.users[i].accont){
haveitem++;
}
}
if(!haveitem){
this.value='無匹配數(shù)據(jù)'
// this.msg=' '
}
}
上述代碼的this.$refs.select.query是選擇器輸入時查詢框綁定的值。
選擇器屬性有filterable屬性時為可查詢選擇。
使用開發(fā)者工具測試時發(fā)現(xiàn)el-select選擇器數(shù)據(jù)綁定的對象value跟查詢輸入時的數(shù)據(jù)對象不是同一個,然后查看el-select源碼得知查詢輸入時的數(shù)據(jù)綁定在select.query上。
本來el-select有個blur事件綁定函數(shù)屬性。但是使用后發(fā)現(xiàn)有時候失焦事件并不能觸發(fā)生效,也就導(dǎo)致所綁定的函數(shù)不能執(zhí)行。
看了源碼得知blur這個事件函數(shù)有個定時器什么的,看不太懂,但是知道不是瀏覽器原生的失焦事件。
于是用vue的ref定位到該選擇器來實現(xiàn)綁定原生onblur事件,則可以避免這個問題。
也可以使用操作dom查詢利用選擇器定位到這個選擇器進行失焦事件綁定。
以上這篇解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
來源:腳本之家
鏈接:https://www.jb51.net/article/199927.htm
申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!