vue下拉框选择触发事件无效的问题

最新推荐文章于 2024-07-05 11:27:32 发布
最新推荐文章于 2024-07-05 11:27:32 发布
阅读量5.2k 收藏 7
点赞数 4
分类专栏： vue前端 文章标签： vue javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l864138617/article/details/107233960
版权

vue下拉框选择触发事件无效的问题

vue下拉框选择触发事件无效

在vue下拉框中如果想在点击下拉框的时候触发事件，使用@click方法不会触发事件。给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）。另外@change事件值发生改变的时候触发。

代码如下：

 <el-select v-model="scope.row.sfff" filterable placeholder="请选择" @click.native="selectData(scope.row.miiId)" @change="changeData(scope.row.sfff,scope.$index,scope.row.weight)" >
<el-option v-for="(item,index) in listData" :key="index" :label="item.scoreCondition" :value="item.score"> </el-option>  </el-select>
一文字豪树
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue点击按钮打开下拉菜单_第二次点击下拉框触发vue事件按钮失效
weixin_29016833的博客
01-30 838
问题描述第二次点击下拉框触发vue事件按钮失效问题出现的环境背景及自己尝试过哪些方法本人新手，求大神指点相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)--请选择--{{value}}{{running?'停!':'开始'}}重置function campaignChange() {var campaignid = document.getElementById("campaign")....
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 选择下拉框选项更改触发事件
weixin_44096821的博客
03-16 9001
这种情况下，可以使用change事件，当选中某一选项后，便会触发该事件。完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script&g
vue+elementUI dialog中select框切换无效始终只显示一个的问题
最新发布
lijiangnan5201314的博客
07-05 228
新增的时候没有问题，可以切换选中不同的选项，但是编辑的时候，出现了无法切换的问题，增加change事件，发现值是变化的，页面就是没变化，应该是没有渲染导致。//在select框中的change事件中，加一段代码，强制重新渲染 @change="$forceUpdate()"。在做一个新增编辑的功能时，共用了一个dialog弹出层，弹出层中有一个选择框如图。$forceUpdate() 在页面初始化的时候，也可以加一下这个。最终问题解决了，也可以有效的切换选项了。placeholder="请选择"
vue下拉框选中一个值时触发事件_Vue 中的 .sync 修饰符
weixin_39946500的博客
11-21 2155
Vue 修饰符 .sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定，是编译时的一个语法糖。具体表现如下：<template> <div> <comp :money.sync="total"></comp> //相当于<comp :money="total" @update:money="total...
Web前端-vue element UI el-select选择框选择el-option触发事件
MinggeQingchun的博客
12-28 6295
需求：有两个select下拉框，选择其中一个select中的el-option值之后，更新另一个select的数据源数组 这里需要注意的是参数key,value对应 :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" this.inspectTimeOption = [ {dictValue: '1', dictLabel: '1'} ] <el-form-item label="...
Vue自定义指令el-select下拉触发事件
刘刘刘的博客
04-21 5566
<el-select v-model="form.equipName" placeholder="请选择" v-el-select-loadmore="loadmore"//自定义绑定 @change="selectChange" > //自定义指令 directives: { 'el-select-loadmore': { bind(el, binding) { const .
详解element-ui设置下拉选择切换必填和非必填
12-10
问题在于，Element-UI的默认行为是在组件初始化时就确定了校验规则，动态切换`rules`对象的`required`属性无效。 为了解决这个问题，我们可以采取以下步骤： 1. **移除动态校验字段的规则**：首先从`rules`对象中...
JSP单选按钮验证、下拉框验证、复选框验证实现代码
10-30
- 事件监听和处理：虽然示例中未直接展示事件监听，但通常表单验证是通过绑定事件监听器到提交按钮或表单本身来触发的。 - 条件判断：通过if语句来判断表单输入的有效性。 - 异步交互：通过弹窗（alert）方式与用户...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
然而，Element-ui的实现中，scroll事件并不支持冒泡，所以这种方法无效。 3. 方案三：深入Element-ui的源码，找到控制popperEl显示隐藏的实例属性。在`select.vue`组件中，`visible`属性决定了popperEl的可见性。...
省市县联动element-ui插件
06-24
当用户在选择省份时，通过事件监听触发函数，获取到选定省份的值，然后根据这个值从服务器或者本地数据源获取对应的市和县的数据，并填充到下拉菜单中。这样可以确保用户在选择时看到的都是有效和相关的选项，避免了...
Element-UI踩坑之Pagination组件的使用
10-17
在组件使用中，`size-change`事件在每页显示数量`pageSize`改变时触发，`current-change`事件则在当前页码`currentPage`改变时触发。通常在这两个事件被触发后，开发者会执行数据的重新获取操作，以保证用户界面上的...
el-dropdown-item添加点击事件
m0_73687324的博客
03-20 1939
【代码】el-dropdown-item添加点击事件。
vue下拉框选中一个值时触发事件_带你再探VBA事件的世界—工作表事件
weixin_39801075的博客
12-11 1461
如果说工作簿事件是VBA事件的基础选手，那工作表事件就是VBA事件中的王牌选手。毫不夸张的说，工作表事件是开发Excel应用程序时使用最多的。对于工作表对象，只有在指定的工作表里的操作才能触发该事件。VBA中Excel的工作表事件有很多，本次主要介绍三个常用事件：①Worksheet_Change事件②Worksheet_Activate事件③Worksheet_Caculate事件一、如何打开工...
vue和element ui 下拉框select的change事件
热门推荐
ice-wee的专栏
08-13 17万+
1 在线编辑测试工具  https://jsfiddle.net/api/post/library/pure/ 编辑好代码后点击 run 即可  2 vue原生写法 2.1 html部分 新增
前端Vue select 下拉框详解以及监听事件
A乐神的博客
01-28 7515
前端Vue select 下拉框详解以及监听事件和:key和 :value区别
表单中使用vue控件＜el-Select＞下拉框时，想实现点击下拉框之外的空白地方，实现触发事件
m0_52086371的博客
09-24 4098
想通过输入的form.product和下拉框选择的form.subEngineerID，查询出form.flowId和form.flowName。点击下拉框报错了“Cannot read property ‘blur’ of undefined”我把第二种方法实现成功的案例和不成功的案例都发出来，大家看看什么原因，我主要是搞后端的，大家好，今天在写vue控件时，想实现点击下拉框之外的空白地方，实现触发事件。2.采用focus来获取blur。网上目前有三种解决方案。解决了给兄弟们发原因。
vue下拉框值改变事件_vue下的@change事件
weixin_42400383的博客
01-12 2036
楼主最近在项目中实践了一下vue，期间遇到了一些坑，现在记录一下先上代码Title请选择{{province.text}}请选择{{city.text}}new Vue({el:'#app',data:{provinces:[],provinceId:'',citys:[],areas:[]},created:function() {this.areas = [{text:'广东省',id:1,p...
vue和elementUI中下拉选选中时触发方法，改变列表中选中数据，通过锚点定位进行滚动展示
艾小逗
04-28 3502
vue和elementUI中下拉选选中时触发方法，改变列表中选中数据，通过锚点定位进行滚动展示 实现： 主要是运用了js锚点的方法，进行页面滚动到选中的列表显示出来； select的change事件触发锚点方法 location.href= '#ID' 效果图： 方便观察，将select放在了列表下面 完整代码： <template> <div class="abou...
vue下拉框选中一个值时触发事件
05-01
Vue.js是目前使用最广泛的前端开发框架之一，在Vue中实现下拉框选中一个值时触发事件的方式有很多种。其中最常用的方法是通过v-model绑定select元素的value属性，并使用v-on事件监听select元素的change事件。 首先，在Vue中使用下拉框需要使用<select>元素，并通过v-model指令将其绑定到data属性或computed属性中的值。例如： ``` <select v-model="selectedOption"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> ``` 上面的代码中，v-model绑定了selectedOption属性，其初始值为空字符串。当用户选择了下拉框中的一个选项时，selectedOption属性会被更新为该选项的value值。 接下来，可以使用v-on指令来监听select元素的change事件，并触发一个方法。例如： ``` <select v-model="selectedOption" v-on:change="selectOption"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> ``` 上面的代码中，v-on指令绑定了selectOption方法，该方法会在用户选择下拉框中的选项时自动触发。可以在该方法中做任何需要处理的事情，例如提交表单、更新数据等。 总之，使用Vue.js实现下拉框选中一个值时触发事件需要使用v-model和v-on指令。可以根据具体需求选择不同的方式来实现。以Vue.js官方文档为参考，可以实现更加灵活、高效的处理方式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值