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 >

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

相关推荐
多看书少吃饭9 小时前
从Vue到Nuxt.js
前端·javascript·vue.js
前端一小卒9 小时前
从 v5 到 v6:这次 Ant Design 升级真的香
前端·javascript
前端不太难10 小时前
《Vue 项目路由 + Layout 的最佳实践》
前端·javascript·vue.js
老华带你飞10 小时前
物流信息管理|基于springboot 物流信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
想学后端的前端工程师10 小时前
【Vue3组合式API实战指南:告别Options API的烦恼】
前端·javascript·vue.js
一勺-_-11 小时前
mermaid图片如何保存成svg格式
开发语言·javascript·ecmascript
GISer_Jing12 小时前
深入拆解Taro框架多端适配原理
前端·javascript·taro
毕设源码-邱学长12 小时前
【开题答辩全过程】以 基于VUE的藏品管理系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
San30.13 小时前
深入理解 JavaScript:手写 `instanceof` 及其背后的原型链原理
开发语言·javascript·ecmascript
北冥有一鲲13 小时前
LangChain.js:RAG 深度解析与全栈实践
开发语言·javascript·langchain