antd vue switch组件怎么把值true、false改为uint32类型的1和0

背景

已知switch组件的checked属性默认是传入true 和 false的,但是有这样的业务情景,既需要使用的是开关,又需要传入的是整数,那么我们应该如何修改呢?

解决方案

javascript 复制代码
 <a-form-item label="允许失败时保存">
     <a-switch :checked="switchValue === 1" @change="handleSwitchChange"></a-switch>
 </a-form-item>
          
handleSwitchChange(checked) {
  this.switchValue = checked ? 1 : 0;
  this.$set(this.info, 'save_if_fail', this.switchValue);
},
  1. 参数 checked : 这个参数表示开关的状态,true 表示开关被打开,false 表示开关被关闭。

  2. this.switchValue = checked ? 1 : 0; : 这行代码使用三元运算符,根据 checked 的值来设置 this.switchValue。如果 checkedtrue,则 this.switchValue 被设置为 1;如果为 false,则设置为 0

  3. this.$set(this.info, 'save_if_fail', this.switchValue); : 这行代码使用 Vue 的 $set 方法来更新 this.info 对象中的 save_if_fail 属性。这个方法确保 Vue 能够检测到这个属性的变化并触发视图更新。

以上。

相关推荐
念九_ysl20 分钟前
前端循环全解析:JS/ES/TS 循环写法与实战示例
前端·javascript·typescript
前端御书房3 小时前
前端PDF转图片技术调研实战指南:从踩坑到高可用方案的深度解析
前端·javascript
程序员黄同学4 小时前
请谈谈 Vue 中的响应式原理,如何实现?
前端·javascript·vue.js
宁波阿成5 小时前
vue3里组件的v-model:value与v-model的区别
前端·javascript·vue.js
柯腾啊5 小时前
VSCode 中使用 Snippets 设置常用代码块
开发语言·前端·javascript·ide·vscode·编辑器·代码片段
Jay丶萧邦5 小时前
el-select:有关多选,options选项值不包含绑定值的回显问题
javascript·vue.js·elementui
pixle06 小时前
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
前端·javascript·3d
我爱学习_zwj6 小时前
后台管理系统-月卡管理
javascript·vue.js·elementui
录大大i7 小时前
HtML之JavaScript BOM编程
前端·javascript·html
customer088 小时前
【开源免费】基于SpringBoot+Vue.JS个人博客系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源