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)的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-07-07
解决vue-router进行build无法正常显示路由页面的问题
下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
el-elementUI使用el-date-picker选择年月
本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
vue使用$store.commit() undefined报错的解决
这篇文章主要介绍了vue使用$store.commit() undefined报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06
解决Vue Loading PostCSS Plugin failed:Cann
这篇文章主要介绍了解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03


最新评论