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 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
javascript每日必学之封装
Feb 23 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
JavaScript数组排序小程序实现解析
Jan 13 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
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
node.js基础知识汇总
2020/08/25 Javascript
Python深入学习之闭包
2014/08/31 Python
python字符串替换的2种方法
2014/11/30 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
以权谋私检举信范文
2015/03/02 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
创业计划书之面包店
2019/09/12 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL