更多内容请访问ElementUI官网
需求说明
- 八个switch组件,用
同一个回调函数
- switch组件状态发生变化时需要知道它
目前开关状态
- 需要知道当前
是哪个switch
问题描述
按照官方文档对switch事件的描述
事件名称 | 说明 | 回调参数 |
---|---|---|
change | switch 状态发生变化时的回调函数 | 新状态的值 |
下面这样写可以满足第二个需求,change
回调函数中的参数callback
就是开关当前的状态值,默认是boolean类型,但是第三个需求还不能解决.
<el-switch
v-model="value1"
@change='changeStatus'>
</el-switch>
<script>
var vm = new Vue({
el: "#app",
data: {
value1: true
},
methods: {
changeStatus: function(callback){
console.log(callback);
}
}
})
</script>
解决办法
下面代码中的$event
就是switch的当前状态值,而num
就是自定义的参数
<el-switch
v-model="value1"
@change='changeStatus($event,1)'>
</el-switch>
<el-switch
v-model="value2"
@change='changeStatus($event,2)'>
</el-switch>
<script>
var vm = new Vue({
el: "#app",
data: {
value1: true,
value2: false
},
methods: {
changeStatus: function($event,num){
console.log($event);
console.log(num);
}
}
})
</script>