解决vue elementUI 使用el-select 时 change事件的触发问题

 更新时间:2020年11月17日 15:08:07   作者:一航  
这篇文章主要介绍了解决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事件的触发问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 用Vue.js实现监听属性的变化

    用Vue.js实现监听属性的变化

    响应系统是Vue.js的一个显著功能,修改属性,可以更新视图,这让状态管理变得非常简单且直观。这篇文章主要给大家介绍如何利用Vue.js实现观察属性的变化,有需要的朋友们可以参考借鉴,感兴趣的朋友们下面来一起看看吧。
    2016-11-11
  • SpringBoot+Vue项目线上买菜系统源码展示

    SpringBoot+Vue项目线上买菜系统源码展示

    本线上买菜系统采用的数据库是Mysql,使用springboot框架开发。在设计过程中,充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点,需要的朋友可以参考下
    2022-08-08
  • Vue中.native修饰符的作用及说明

    Vue中.native修饰符的作用及说明

    这篇文章主要介绍了Vue中.native修饰符的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3+pinia的快速入门使用教程

    vue3+pinia的快速入门使用教程

    Pinia是Vue的一个存储库,它允许你跨组件/页面共享状态,下面这篇文章主要给大家介绍了关于vue3+pinia的快速入门使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 概述VUE2.0不可忽视的很多变化

    概述VUE2.0不可忽视的很多变化

    本文给大家分析下vue2.0几个重要的与自己目前项目相关的变化,也是vue2.0不可忽视的变化,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • 关于vue中api统一管理的那些事

    关于vue中api统一管理的那些事

    最近在学习Vue教程,下面这篇文章主要给大家介绍了关于vue中api统一管理的那些事,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-04-04
  • VUE项目中调用高德地图的全流程讲解

    VUE项目中调用高德地图的全流程讲解

    这篇文章主要介绍了VUE项目中调用高德地图的全流程讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue3 组合式api中 ref 和$parent 的使用方法

    vue3 组合式api中 ref 和$parent 的使用方法

    vue3中, 在 组件中添加一个 component ref=“xxx” ,就可以在父组件中得到 子组件的 dom 对象, 以及 虚拟的 dom 对象, 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了,这篇文章主要介绍了vue3组合式api中ref和$parent的使用,需要的朋友可以参考下
    2023-09-09
  • vuex的数据渲染与修改浅析

    vuex的数据渲染与修改浅析

    这篇文章主要给大家介绍了关于vuex的数据渲染与修改的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue3.x使用mitt.js进行组件通信

    Vue3.x使用mitt.js进行组件通信

    Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js。本文就介绍一下mitt.js的具体使用方法,感兴趣的可以了解一下
    2021-06-06

最新评论