办理vue elementUI 行使el-select 时 change变乱的触发题目

　 短视频，自媒体，达人种草一站处事

这篇文章首要先容了办理vue elementUI 行使el-select 时 change变乱的触发题目，具有很好的参考代价，但愿对各人有所辅佐。一路跟从小编过来看看吧

如下所示：

我们必要的是选择之后才触发，可是这样写你会发明，页面初始化的时辰会触发多次，选择之后又会触发多次，缘故起因是我们用错了标签，应该用 @change="selectChange()

这样写就可以了，v-bind的缩写是：，v-on的缩写是@，这里是触发变乱，应该用@,

增补常识： 为elment-ui的el-select选择器添加onblur失焦变乱发生的题目

如下所示：

     用户编号：
    

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

所必要实现的成果是当查询输入时，假如用户输入的数据是选项内里不匹配的，则返回表现无匹配数据。

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变乱的触发题目就是小编分享给各人的所有内容了，但愿能给各人一个参考，也但愿各人多多支持剧本之家。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!