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 >

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

相关推荐
进击的野人4 分钟前
防抖与节流:优化前端性能的两种关键技术
前端·javascript
小高0075 分钟前
别再滥用 Base64 了——Blob 才是前端减负的正确姿势
前端·javascript·面试
黑羽同学5 分钟前
Fix: 修复AI聊天输入框Safari回车发送bug
前端·javascript·dom
进击的野人31 分钟前
JavaScript原型与原型链:深入理解面向对象编程的基石
前端·javascript·面试
呵阿咯咯32 分钟前
Vue3项目记录
前端·vue.js
夏目友人爱吃豆腐36 分钟前
uniapp源码解析(Vue3/Vite版)
前端·vue.js·uni-app
OlahOlah41 分钟前
解决 JavaScript Number 精度问题:处理超大 Long 类型 ID
javascript
Sapphire~1 小时前
JavaScript 数组方法的系统方法: 分类理解 + 形象化记忆的方法
javascript
一只小阿乐1 小时前
react 点击事件注意事项
前端·javascript·react.js·react
xiaoxue..2 小时前
深入理解JavaScript中的深拷贝与浅拷贝:内存管理的艺术
开发语言·前端·javascript·面试