解决Element组件el-switch在Vue中值的绑定与回显问题

<template>
  <el-switch
    v-model="switchValue"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="1"
    inactive-value="0"
    @change="handleSwitchChange"
  />
</template>
 
<script>
export default {
  data() {
    return {
      // 绑定switch开关的值，'1'或'0'
      switchValue: '0',
    };
  },
  methods: {
    handleSwitchChange(value) {
      // 处理switch值变化的逻辑
      console.log('Switch value changed:', value);
      // 假设这里是发送请求到后端的逻辑
      // this.updateServer(value);
    },
    // 初始化时设置switch的值
    initSwitchValue(initialValue) {
      this.switchValue = initialValue;
    }
  },
  // 假设从后端获取数据的钩子
  async created() {
    const response = await this.fetchDataFromServer();
    // 假设response.data.status是后端返回的状态值
    this.initSwitchValue(response.data.status);
  }
};
</script>

这个代码实例展示了如何在Vue中使用Element UI的el-switch组件，并正确绑定和回显数据。通过v-model指令，我们可以轻松地将组件的值绑定到Vue实例的数据属性上。同时，我们可以通过active-value和inactive-value属性来定义开启和关闭时对应的值。此外，我们还可以通过@change事件来监听开关状态的变化，并执行相关的逻辑，例如发送请求到后端。