关于element-ui中的switch双向数据绑定影响数据的问题

2019/08/09

switch组件官方说明

基本用法
绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。、

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

用法警告

注意switch绑定的是一个Boolean变量，你需要给他绑定的Boolean变量。
如果后台给你传值是number类型，用number代表不同的状态，此时你使用v-model绑定了这个number类型的变量，则由于v-model双向绑定，导致该变量的值永远为false。
一般来说，对于number类型，js中进行判断的话

let num = 1;
if(num){
	console.log("true")
}else{
	console.log("false")
}
num = 0;
if(num){
	console.log("true")
}else{
	console.log("false")
}

上面的代码，会打印
true
false
在一般情况下，我们可能认为我用v-model绑定了number类型，如果该变量有值，则返回true，switch状态为true。但是恰恰相反，只要你绑定了number类型，则他的值永远为false。