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 >

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

相关推荐
嘟嘟07172 分钟前
从手写 HashRouter 到 React Router:逐层拆解 SPA 前端路由的完整实现
前端·javascript
生戎马 平安京策1 小时前
只学一点点:我的技术学习策略
前端·javascript·react.js
__zRainy__2 小时前
React之reduce实现compose和中间件
javascript·react.js·ecmascript
得物技术3 小时前
实战从零开始构建一个Coding Agent:Violin |得物技术
javascript·架构·llm
JiaLin_Denny4 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
无人生还4 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
wear工程师4 小时前
React 的 key 为什么不能随手用 index:一插入列表,状态就串了
javascript·react.js
嘟嘟07174 小时前
一文讲通 SPA 前端路由:从传统多页到手写 HashRouter
javascript
柒和远方4 小时前
V058:前端路由的第一性原理:从 hashchange 手写路由,到 React Router 的嵌套与懒加载
前端·javascript·react.js
冷咖啡离 我的笨笨4 小时前
通过(Node Js||.Net)基于HTML5的WebSocket实现实时视频文字传输(上)
javascript·.net·html5