Vue下拉框值变动事件传多个参数方式
更新时间：2024年04月25日 09:01:03 作者：天航星
这篇文章主要介绍了Vue下拉框值变动事件传多个参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue下拉框值变动事件传多个参数
在使用 Vue 进行开发时，下拉框值变动事件 @change 是很常用的。
其传参一般分为两种方式：
- 默认传参
- 自定义传参
默认传参
@change 默认会传选中项标识的参数，在传参处不用定义，在方法中直接接受即可。
<template>
<el-select v-model="value" placeholder="请选择" @change="onChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template><script>
methods: {
onChange(value) {
console.log(value);
}
}
</script>
此时控制台会打印下拉框选中项对应的标识值。
自定义传参
我们经常会遇到需要下拉框传递多个参数的场景，这是需要自定义传参方式。
<template>
<div v-for="(item, index) in otherFeesList" :key="index" class="item">
<el-select v-model="value" placeholder="请选择" @change="onChange($event, index)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input v-model="item.unit">
</div>
</template><script>
methods: {
onChange(value, index) {
console.log(value);
console.log(index);
}
}
</script>
此时控制台会分别打印下拉框选中项对应的标识值和外部标签中的序号值。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
关于IDEA中的.VUE文件报错 Export declarations are not supported by cu
这篇文章主要介绍了关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了 vue3 mixin 混入使用方法，mixin 混入，提供了一种非常灵活的方式，来分发 vue 组件中的可复用功能，一个mixin 对象可以包含任意组件选项，当组件使用 mixin 对象时，所有的 mixin 对象的选项将被混入组件本身的选项。,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了vue路由划分模块并自动引入方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
我们使⽤vue-element-admin前端框架开发后台管理系统时,⼀般都会涉及到菜单的权限控制问题,下面这篇文章主要给大家介绍了关于vue使用路由守卫实现菜单的权限设置的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue-CLI 3 scp2自动部署项目至服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
Vue是一款流行的JavaScript框架,用于开发动态单页应用程序,本地安装和环境配置是学习和使用Vue的第一步,下面这篇文章主要给大家介绍了关于vue开发者vite多环境配置的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了基于Vue写一个简单的倒计时按钮功能，在项目开发的过程，经常会遇到发送验证码，点击之后有60秒倒计时的按钮，今天小编就给大家分享实例代码，需要的朋友参考下吧2018-04-04
这篇文章主要介绍了vue-cli构建项目下使用微信分享功能,本文通过实例代码相结合的形式给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
在使用 Vue 开发前端的时候遇到一个场景在首页进行一些数据搜索，点击搜索结果进入详情页面，浏览详情页后返回主页，所以需要在返回后恢复跳转前的页面参数状态，今天通过本文给大家分享Vue 路由页面状态返回的操作方法，一起看看吧2021-07-07
这篇文章主要介绍了vue element 生成无线级左侧菜单的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
最新评论