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 >

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

相关推荐
活宝小娜几秒前
新增和编辑共用弹窗模板
开发语言·前端·javascript·vue.js
阳光的男夹克7 分钟前
Vue3 Element-plus 封装Select下拉复选框选择器
javascript·vue.js·ecmascript
IT毕设实战小研36 分钟前
Java毕业设计选题推荐 |基于SpringBoot的健身爱好线上互动与打卡社交平台系统 互动打卡小程序系统
java·开发语言·vue.js·spring boot·vue·毕业设计·课程设计
小离a_a2 小时前
根据图片远程地址复制图片内容,可以在富文本、word等文本里粘贴
开发语言·前端·javascript
宇寒风暖5 小时前
@(AJAX)
前端·javascript·笔记·学习·ajax
gnip11 小时前
监听设备网络状态
前端·javascript
IT毕设实战小研13 小时前
基于SpringBoot的救援物资管理系统 受灾应急物资管理系统 物资管理小程序
java·开发语言·vue.js·spring boot·小程序·毕业设计·课程设计
weixin_4569042714 小时前
Vue3入口文件main.js解析
前端·javascript·vue.js
前端领航者14 小时前
重学Vue3《Vue Watch 监听器深度指南:场景、技巧与底层优化原理剖析》
前端·vue.js
neon120414 小时前
Vue 3 父子组件通信核心机制详解:defineProps、defineEmits 与 defineExpose 完全指南
前端·javascript·vue.js·前端框架