element-ui组件中input等的change事件中传递自定义参数


Posted in Javascript onMay 22, 2019

以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态。

下面这样写是无效的:

@change="changeStatus(val, index)"

<div v-for="(item,index) in itemList">
   <el-select v-model="item.value" @change="changeStatus(val, index)">
     <el-option v-for="op in options" 
       :key="op.key":
       :label="op.label"
       :value="op.label">
     </el-option>
    </el-select>
</div>

这样再封装一层就可以了:

@change="((val)=>{changeStatus(val, index)})"
<div v-for="(item,index) in itemList">
   <el-select v-model="item.value" @change="((val)=>{changeStatus(val, index)})">
    <el-option v-for="op in options" 
     :key="op.key" 
     :label="op.label"
      value="op.label">
     </el-option>
   </el-select>
 </div>

总结

以上所述是小编给大家介绍的element-ui组件中input等的change事件中传递自定义参数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!        

Javascript 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
记一次vue跨域的解决
Oct 21 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 #Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 #Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 #Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python计算auc指标实例
2017/07/13 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python气泡提示与标签的实现
2020/04/01 Python
python空元组在all中返回结果详解
2020/12/15 Python
python性能测试工具locust的使用
2020/12/28 Python
详解Python模块化编程与装饰器
2021/01/16 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
超市业务员岗位职责
2013/12/05 职场文书
单位介绍信格式
2015/01/31 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
张思德观后感
2015/06/09 职场文书