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 >

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

相关推荐
志尊宝2 小时前
AI原生前端开发(031):AI辅助的性能分析与瓶颈定位
javascript·人工智能·ai-native
adinnet20262 小时前
持续智能问数:多轮对话状态管理、下钻钻取与经营驾驶舱的演进
javascript·数据库·人工智能
FYKJ_20102 小时前
springboot高考志愿填报推荐系统14332-计算机课程设计、毕业设计
javascript·spring boot·python·架构·django·课程设计·高考
全栈若城2 小时前
从源码拆解一个 AIUI 每日一词智能体:页面、离线索引与硬件交互
javascript
DataGear2 小时前
DataGear 6.1.1 发布,数据可视化分析平台
javascript·信息可视化·数据分析·echarts·数据可视化
小郎君6582 小时前
keep-alive 页面怎么“真刷新”?别改外层 key——一个 refreshVersion 的完整实现
vue.js·算法
Dumbness2 小时前
农历转换的 4 个边界:2 月 30 日能转出"正月十四"、小月没有三十、闰月、立春到春节之间的干支
前端·javascript
系统集成-鹰翔2 小时前
ERP接口月度统计少了零单月份:SQLite分组与最近三个月均值排查
javascript·数据库·经验分享·后端
徐小夕2 小时前
JitWord 4.3 发布!Word 内嵌 Visio 图表、原生流程图一键无损解析
前端·vue.js·github
mONESY3 小时前
从线性 RAG 到 Agentic RAG|基于 LangGraph 实现自主决策 RAG 闭环
javascript·面试