Element-UI--＜el-switch＞的@change回调函数的参数用法

原文网址：Element-UI--＜el-switch＞的@change回调函数的参数用法_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍Element-UI的<el-switch>的@change回调函数的参数用法。

需求

1. 2个switch组件，用同一个回调函数
2. switch组件状态发生变化时需要知道它目前开关状态
3. 需要知道当前是哪个switch

问题：不传递参数时只能知道开关状态

官方文档对switch事件的描述

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数	新状态的值

代码

<template>
  <div>
    <el-switch
      v-model="value1"
      @change="changeStatus"
    >
    </el-switch>

  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      value1: false
    }
  },
  methods: {
    changeStatus (status) {
      console.log('事件')
      console.log(status)
    }
  }
}
</script>

<style scoped>

</style>

测试

解决方案：传递$event和其他参数

$event会包含开关状态的值，可以将它作为参数。另外可以指定其他参数。

<template>
  <div>
    <el-switch
      v-model="value1"
      @change="changeStatus($event, 1)"
    >
    </el-switch>

  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      value1: false
    }
  },
  methods: {
    changeStatus ($event, switchNum) {
      console.log('事件')
      console.log($event)
      console.log('序号')
      console.log(switchNum)
    }
  }
}
</script>

<style scoped>

</style>

测试（可以获取开关状态和当前是第几个按钮）

其他网址

ElementUI中switch回调函数change的参数问题_fool_dawei的博客-CSDN博客