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 BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆5 分钟前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
用户92724725021910 分钟前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑42 分钟前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者43 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者43 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag1 小时前
报错 400 和405解决方案
vue.js·spring boot
Web小助手1 小时前
js高级程序设计(日期)
javascript
白杨木影子被拉长1 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app