el-select组件绑定change事件的踩坑记录

目录
  • el-select组件绑定change事件踩坑
  • el-select实现change事件
  • 总结

el-select组件绑定change事件踩坑

要注意区分elementUI组件（比如el-select、el-button、el-input等组件）的focus、click、change等事件和DOM的focus、click、change原生事件，二者是不一样的。

如果要在element组件上触发原生事件，一律都得加.native修饰符，否则无法触发事件。

但是要注意很多elementUI的组件本身封装了focus、click、change等事件，比如el-button的click事件，是经过elementUI封装过的，所以给el-button绑定click事件时，不需要加.native修饰符，el-input的@focus事件也是同理。

今天踩了一个坑，在给el-select绑定change事件时，没搞清楚该change事件是elementUI封装过的change事件@change=“changeGateway(event)”，发现event一直是和选中的option的value值保持一致，按照网上博客写的event.target.value拿到的值一直都是undefined，最后才发现，博客里的select是原生的select，而我写的是el-select，给el-select绑定的change事件不是dom原生的change事件，而是elementUI封装过了的change事件，回调函数的参数是下拉列表目前的选中值，所以$event才一直和选中的option的value值保持一致。

另外要注意由于el-select组件已经封装了change事件，就无法再绑定原生的change事件，如果对el-select绑定change事件像@change.native这样写，change事件是不会触发的！

再次强调：

elementUI组件如果已经封装过click、change、focus等事件，则无法再绑定DOM原生的click、change、focus事件，即使加.native修饰符也没用。

但今天来了个需求，在点击选择关联网关的下拉列表时，不仅要传网关name参数给后端，还要在改变option的同时再额外多传一个gatewayIp参数给后端，这个gatewayIp要在下拉列表option的数据里面拿，起初想通过给el-select组件绑定change事件拿到选中的option的完整数据，最终发现做不到，那样只能拿到选中的option的value值（因为elementUI封装的change事件的回调参数就是下拉列表目前的选中值，见上图），最后的实现思路是给el-option绑定原生click事件拿到选中的option的完整数据item

代码如下：

<el-form-item label="关联网关" prop="bindGateName">
  <el-select v-model="form.bindGateName" placeholder="请选择" clearable>
    <el-option v-for="item in bindGates" :label="item.gateWayInfo.name" :value="item.gateWayInfo.name" @click.native="changeGateway(item)" :key="item.gateWayId"></el-option>
  </el-select>
</el-form-item>

changeGateway(data){
  // console.log(data) //此data是选中的那个option的完整数据item
  this.form.gateWayIp = data.gateWayInfo.ip;
},

el-select实现change事件

官网提供了el-select的change事件，但是并没有提供使用示例，但是最近在vue项目中却要使用到。

直接上代码，HTML部分

<el-select @change="selectChanged" v-model="devType" size=small>
    <el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
</el-select>

js部分

data() {
  return {
    devType: '',
    devTypes: []
  }
},
 
methods: {
  selectChanged(value) {
    console.log(value)
  }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决element-ui的el-select选择器的@blur事件失效的坑

    目录 element-ui的el-select选择器的@blur事件失效 解决 使用el-select中的@blur遇到的问题 解决 element-ui的el-select选择器的@blur事件失效 element-UI文档中本来el-select有个blur事件绑定函数属性. 但是使用后发现有时候失焦事件并不能触发生效,也就导致所绑定的函数不能执行. 解决 利用el-select的@focus方法,在select标签内 添加 ref 于此便可在focus事件内触发 blur事件. 代码如下:

  • vue的el-select绑定的值无法选中el-option问题及解决

    目录 el-select绑定的值无法选中el-option问题 vue el-select 2个下拉框联动时产生的无法选中值的bug 问题描述 el-select绑定的值无法选中el-option问题 框架vue-element-ui中的select绑定值v-model无法自动选中option的问题 代码如下: <template>  <el-select v-model="formData.colorId" placeholder="选择">

  • 解决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="it

  • el-select组件绑定change事件的踩坑记录

    目录 el-select组件绑定change事件踩坑 el-select实现change事件 总结 el-select组件绑定change事件踩坑 要注意区分elementUI组件(比如el-select.el-button.el-input等组件)的focus.click.change等事件和DOM的focus.click.change原生事件,二者是不一样的. 如果要在element组件上触发原生事件,一律都得加.native修饰符,否则无法触发事件. 但是要注意很多elementUI的组件

  • Centos 7.2中双网卡绑定及相关问题踩坑记录

    Centos 7.2中双网卡绑定及相关问题踩坑记录

    前言 最近工作中在做线上服务器,安装centos7.2 x64最小化安装,需要做链路聚合,双网卡绑定.在centos 6.x 和 centos 7上测试都OK,于是直接开搞. 说明下,以下环境是在虚拟机中实现的: 系统: centos7.2 x64 最小化安装. 为了方便演示,这里共有三张网卡: eno16777736 : 桥接网卡:10.0.0.11/24 剩下的两张网卡准备做绑定: eno33554984 eno50332208 [root@bogon ~]# nmcli con sh NA

  • element-ui中select组件绑定值改变,触发change事件方法

    1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option)

  • vue学习笔记之给组件绑定原生事件操作示例

    本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发

  • vue select组件绑定的值为数字类型遇到的问题

    目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q

  • layui 中select下拉change事件失效的解决方法

    layui 中select下拉change事件失效的处理方法 1.select中添加 lay-filter="test" <select lay-filter="test"></select> 2.处方方法 form.on('select(test)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 co

  • vue关于select组件绑定的值为数字类型的问题

    目录 select组件绑定的值为数字类型问题 number可以将绑定的 v-model 改为 number类型 若元素属性需要绑定的值为数字时的处理 1.如果直接这样写 2.解决 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以. 如下所示: number可以将绑定的 v-model 改为

  • 详解element-ui 组件el-autocomplete使用踩坑记录

    详解element-ui 组件el-autocomplete使用踩坑记录

    项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题 createFilter(queryString, filed) { console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break case 'cardPa

  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    目录 背景 问题定位 进一步分析 总结 背景 在我的 <Vue 3 开发企业级音乐 App>课程问答区,有个同学提了个问题,在歌手列表到歌手详情页面到转场动画中,只有进入动画,却没有离场动画: 该学生确实在这个问题上研究了有一段时间,而且从他的描述,我一时半会儿也想不出哪有问题,于是让他把代码传到 GitHub 上,毕竟直接从代码层面定位问题是最靠谱的. 问题定位 一般遇到此类问题的时候,我的第一反应是他用的 Vue 3 版本可能有问题,毕竟 Vue 3 还在不断迭代过程,某个版本有一些小 b

  • 微信小程序开发篇之踩坑记录

    微信小程序开发篇之踩坑记录

    最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方.这篇文章从实用性出发,记录了开发过程中的一些问题: 1. 样式优先级混乱 在使用button组件时,发现在class中设置width不生效,下面贴上代码: .my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0; } 经过微信调试工具排查后,发现user agent的

随机推荐