el-checkbox和el-switch绑定一个Number值

因为我们对状态这种字段,后端一般返回的是Number值。0为正常,1为停用。

el-switch,el-checkbox这种控件呢,一般是绑定布尔值的。原来我的做法是使用value和change事件来做转换,而不是v-model。但是后来发现,el-checkbox对于这种做法并没有效果。

js 复制代码
 <el-switch
    :value="!row.status"
    @change="value => {changeStatus(row, value)}"
  />
  
    // 修改状态
    changeStatus(row, value) {
      console.log(value, row)
      row.status = Number(!value)
    },

后来看文档才发现,是可以使用v-model来绑定Number,String类型的。只需要传入参数,指定他的true值和false值即可。

正确写法

js 复制代码
<el-checkbox v-model="data.status" :true-label="1" :false-label="0">停用</el-checkbox>

<el-switch v-model="data.status" :inactive-value="1" :active-value="0">停用</el-switch >

所以还是要细看文档啊呜呜呜~

相关推荐
Brave & Real5 分钟前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
米丘1 小时前
React 19.x 的 lazy 与 Suspense
前端·javascript·react.js
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
一 乐2 小时前
疫苗发布和接种预约|基于Java+vue疫苗发布和接种预约系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·疫苗发布和接种预约系统系统
riuphan2 小时前
JavaScript 中的 this 关键字
javascript
掰头战士2 小时前
五分钟带你深入了解 this
javascript
biubiubiu_LYQ2 小时前
萌新小白基础理解篇之 this 关键字
前端·javascript
甜味弥漫2 小时前
深度解析 JS 中的 this 指向:从底层逻辑到实战规则
javascript·面试
爱上好庆祝3 小时前
学习JS第十一天(JS的进阶)
前端·javascript·学习
喵个咪3 小时前
统一范式:中后台Admin项目标准化API分层开发方案(Vue/React通用)
前端·vue.js·react.js