vue+iview Switch 开关-CSDN博客

最近做项目用到vue+iview Switch 开关，遇到两个问题

问题1：直接引用开关组件组件在页面中显示不出来如：<Switch v-model="switch1" @on-change="change" />

解决：<i-switch v-model="switch1" @on-change="change" />这样就可以了

问题2：从后台获取数据回显的时候报错如：Value should be trueValue or falseValue

解决：

<template>
   <i-switch v-model="data.switchShow" size="large" true-value="true" false-value="false">
          <span slot="open">开启</span>
          <span slot="close">禁用</span>
    </i-switch>
</template>

<script>
 export default {
  data() {
    return {
      data: {
        switchShow: false,
      },
    }
  },
  mounted() {
    axs.get('').then(res => {
      this.data= {//重新赋值switchShow属性 因为请求之后switchShow属性会被清空，，清空之后没有默认值，v-model是双向数据绑定 没有值所以会报错

         switchShow: res.data 
         } 
     }) 
  } 
} </script>