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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
几种显示数据的方法的比较
2006/10/09 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
Highcharts入门之简介
2016/08/02 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
剖析Angular Component的源码示例
2018/03/23 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python生成器表达式和列表解析
2016/03/10 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
python定义类的简单用法
2020/07/24 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
教学个人的自我评价分享
2014/02/16 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
2015年司法局工作总结
2015/05/22 职场文书
六年级情感作文之500字
2019/10/23 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers