溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue項目中elementUI 使用el-select 時會觸發change事件如何解決？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
如下所示：
<el-select v-model="level" size="mini" placeholder="請選擇" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select>
我們需要的是選擇之后才觸發，但是這樣寫你會發現，頁面初始化的時候會觸發多次，選擇之后又會觸發多次，原因是我們用錯了標簽，應該用 @change="selectChange()
<el-select v-model="level" size="mini" placeholder="請選擇" @change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select>
這樣寫就可以了，v-bind的縮寫是：，v-on的縮寫是@，這里是觸發事件，應該用@,
補充知識：為elment-ui的el-select選擇器添加onblur失焦事件產生的問題
如下所示：
<div class="oneline">
<span >用戶編號：</span>
<div class="block left">
<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">
</el-option>
</el-select>
</div>
</div>
所需要實現的功能是當查詢輸入時，如果用戶輸入的數據是選項里面不匹配的，則返回顯示無匹配數據。
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='無匹配數據'
// this.msg=' '
}
}上述代碼的this.$refs.select.query是選擇器輸入時查詢框綁定的值。
選擇器屬性有filterable屬性時為可查詢選擇。
使用開發者工具測試時發現el-select選擇器數據綁定的對象value跟查詢輸入時的數據對象不是同一個，然后查看el-select源碼得知查詢輸入時的數據綁定在select.query上。
本來el-select有個blur事件綁定函數屬性。但是使用后發現有時候失焦事件并不能觸發生效，也就導致所綁定的函數不能執行。
看了源碼得知blur這個事件函數有個定時器什么的，看不太懂，但是知道不是瀏覽器原生的失焦事件。
于是用vue的ref定位到該選擇器來實現綁定原生onblur事件，則可以避免這個問題。
也可以使用操作dom查詢利用選擇器定位到這個選擇器進行失焦事件綁定。
關于vue項目中elementUI 使用el-select 時會觸發change事件如何解決問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
