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 >

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

相关推荐
a11177632 分钟前
动森UI组件(开源 html animal-island-ui )
前端·javascript·ui·开源·html
ljt272496066134 分钟前
Vue笔记(六)--响应式
javascript·vue.js·笔记
threelab42 分钟前
Three.js 黑洞引力效果着色器 | 三维可视化 / AI 提示词
开发语言·javascript·着色器
এ慕ོ冬℘゜1 小时前
JS 前端基础高频面试题
开发语言·前端·javascript
放下华子我只抽RuiKe51 小时前
React 从入门到生产(八):测试与部署
前端·javascript·深度学习·react.js·前端框架·ecmascript·集成学习
Dxy12393102161 小时前
JS列表获取指定范围值的 N 种方法
开发语言·javascript·ecmascript
蜡笔小电芯1 小时前
【Electron】第2章—BrowserWindow 与 Electron 窗口机制
前端·javascript·electron
Hilaku2 小时前
从 15MB 减到 800KB,一行 ffmpeg 解决3D 渲染卡顿问题
前端·javascript·程序员
JiaWen技术圈2 小时前
React Native 存在水合(Hydration)问题吗
javascript
Dxy12393102162 小时前
`...` 展开运算符(Spread Operator)详解
开发语言·javascript