Vue下拉框值变动事件传多个参数方式
作者：天航星
这篇文章主要介绍了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>
此时控制台会分别打印下拉框选中项对应的标识值和外部标签中的序号值。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。