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)
    },

总结

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

相关文章

  • vue-resource 拦截器(interceptor)的使用详解

    vue-resource 拦截器(interceptor)的使用详解

    本篇文章主要介绍了vue-resource 拦截器(interceptor)的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 解决vue-router进行build无法正常显示路由页面的问题

    解决vue-router进行build无法正常显示路由页面的问题

    下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue filter介绍及其使用详解

    Vue filter介绍及其使用详解

    本篇文章主要介绍了Vue filter介绍及其使用详解,VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理。一起跟随小编过来看看吧
    2017-10-10
  • el-elementUI使用el-date-picker选择年月

    el-elementUI使用el-date-picker选择年月

    本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • vue使用$store.commit() undefined报错的解决

    vue使用$store.commit() undefined报错的解决

    这篇文章主要介绍了vue使用$store.commit() undefined报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue的状态库管理实现示例

    vue的状态库管理实现示例

    Vuex 是 Vue.js 官方推荐的状态管理库之一,本文主要介绍了vue的状态库管理实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-04-04
  • 解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题

    解决Vue Loading PostCSS Plugin failed:Cann

    这篇文章主要介绍了解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue如何自定义按钮单选和多选

    vue如何自定义按钮单选和多选

    这篇文章主要介绍了vue如何自定义按钮单选和多选问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue.js原理分析之nextTick实现详解

    Vue.js原理分析之nextTick实现详解

    这篇文章主要给大家介绍了关于Vue.js原理分析之nextTick实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue路由传参刷新后数据丢失问题及解决

    vue路由传参刷新后数据丢失问题及解决

    这篇文章主要介绍了vue路由传参刷新后数据丢失问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论