浅谈浅谈ElementUI中中switch回调函数回调函数change的参数问题的参数问题
今天小编就为大家分享一篇浅谈ElementUI中switch回调函数change的参数问题，具有很好的价值，希望对大家
有所帮助。一起跟随小编过来看看吧
需求说明需求说明
八个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: {
change: 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: {
change: function($event,num){
console.log($event);
console.log(num);
}
}
})
</script>
拓展知识：基于拓展知识：基于element-ui（（vue版）使用版）使用switch时时change回调函数中的形参传值问题回调函数中的形参传值问题
需求说明需求说明
评论0