vue el-switch绑定数值时需要注意的问题

 更新时间:2024年12月26日 09:19:12   作者:-小龙人  
在Vue中使用`el-switch`组件时,绑定数值类型时应使用布尔值(true/false),而绑定字符串类型时应使用字符串('true'/'false')

vue el-switch绑定数值问题

vue el-switch 绑定数值时要用

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

vue el-switch 绑定String时要用

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

el-switch 动态绑定想要的值

如果后端返回给你的数据不是true和false或者是1和2动态绑定怎么做?

<el-switch v-model="scope.row.isOpen" active-color="#13ce66" @change="SwitchChange(scope.row)" :active-value="1" :inactive-value="2"
inactive-color="#ff4949"></el-switch>

:active-value="1"/*开启时的值*/
:inactive-value="2"/*关闭时的值*/

  // 开关变化
SwitchChange(event) {
    /*点击时他会自动把你绑定的值变更,直接去请求数据就可以了*/
    var parms = {
        isOpen: event.isOpen,
        id: event.id
    }
    SonList.Openclose(parms).then(res => {
        this.$message({
            message: res.msg,
            type: 'success'
        })
        this.loading = false
        this.getdata()
    }).catch(error => {
          this.loading = false
          console.log(error)
      })
        console.log(event)
    },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3中Reactive的使用详解

    Vue3中Reactive的使用详解

    Vue 3 的 Composition API 带来了强大的 reactive 函数,它允许你在 Vue 应用程序中创建响应式数据,本文我们将深入探讨 Vue 3 的 reactive,并提供一些注意事项和解决方案,希望可以帮助打更好地使用它
    2023-11-11
  • vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容的实现代码

    这篇文章主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue父组件向子组件(props)传递数据的方法

    vue父组件向子组件(props)传递数据的方法

    这篇文章主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
    2018-01-01
  • vuex通过getters访问数据为undefined问题及解决

    vuex通过getters访问数据为undefined问题及解决

    这篇文章主要介绍了vuex通过getters访问数据为undefined问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue的rules验证部分可以部分又失效的原因及解决方案

    vue的rules验证部分可以部分又失效的原因及解决方案

    vue的rules验证失效,部分可以部分又失效,很多百度都有,但是我这里遇到了一个特别的,那就是prop没有写全,导致验证某一个失效,接下来就跟小编一起来看看这个失效的原因和解决方案吧
    2023-11-11
  • Vue组件实现景深卡片轮播示例

    Vue组件实现景深卡片轮播示例

    这篇文章主要为大家介绍了Vue组件实现景深卡片轮播示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue全局自定义指令Modal拖拽的实践

    Vue全局自定义指令Modal拖拽的实践

    最近一直在做的项目是Vue2搭建的项目,本文主要介绍了Vue全局自定义指令Modal拖拽的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 使用Vant完成通知栏Notify的提示操作

    使用Vant完成通知栏Notify的提示操作

    这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue-element-admin后台生成动态路由及菜单方法详解

    vue-element-admin后台生成动态路由及菜单方法详解

    vue-element-admin后台管理系统模板框架 是vue结合element-ui一体的管理系统框架,下面这篇文章主要给大家介绍了关于vue-element-admin后台生成动态路由及菜单的相关资料,需要的朋友可以参考下
    2023-09-09
  • vue通过element树形控件实现树形表格

    vue通过element树形控件实现树形表格

    这篇文章主要为大家介绍了vue element树形控件实现树形表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11

最新评论