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 >

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

相关推荐
an86950016 小时前
vue新建项目
前端·javascript·vue.js
czhc11400756637 小时前
c# 1121 构造方法
java·javascript·c#
GISer_Jing9 小时前
3D Cesium渲染架剖析
javascript·3d·webgl
han_9 小时前
前端性能优化之CSS篇
前端·javascript·性能优化
JIngJaneIL10 小时前
汽车租赁|汽车管理|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁
z***I39410 小时前
JavaScript爬虫应用案例
开发语言·javascript·爬虫
清风徐来QCQ11 小时前
javaScript(map,ref,?,forEach,watch)
java·前端·javascript
星月前端11 小时前
[特殊字符]面向 ArcGIS for JavaScript(4.x)开发者的「坐标系统(CRS / 投影)」全面解读
开发语言·javascript·arcgis
星空的资源小屋12 小时前
永久删除文件利器:Permadelete
java·javascript·人工智能
柒昀12 小时前
Vue.js
前端·javascript·vue.js