久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術(shù)文章
文章詳情頁

解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題

瀏覽:2日期:2022-10-25 17:47:08

如下所示:

<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>

我們需要的是選擇之后才觸發(fā),但是這樣寫你會發(fā)現(xiàn),頁面初始化的時候會觸發(fā)多次,選擇之后又會觸發(fā)多次,原因是我們用錯了標(biāo)簽,應(yīng)該用 @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的縮寫是@,這里是觸發(fā)事件,應(yīng)該用@,

補(bǔ)充知識:為elment-ui的el-select選擇器添加onblur失焦事件產(chǎn)生的問題

如下所示:

<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-optionv-for='item in users':key='item.accont':label='item.accont':value='item.accont'> </el-option> </el-select> </div> </div>

解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題

所需要實現(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查詢利用選擇器定位到這個選擇器進(jìn)行失焦事件綁定。

以上這篇解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 东安县| 罗田县| 乃东县| 大港区| 蕉岭县| 三江| 鄂伦春自治旗| 天等县| 临泉县| 镇宁| 宾阳县| 庄河市| 祁阳县| 长岛县| 石景山区| 改则县| 喀什市| 利辛县| 镇雄县| 辽阳市| 栖霞市| 吴堡县| 积石山| 乌兰浩特市| 张家口市| 邓州市| 泰安市| 湖南省| 宾阳县| 商水县| 梅河口市| 辽中县| 木里| 南木林县| 屯门区| 临邑县| 沾化县| 五原县| 济阳县| 甘南县| 锦州市|