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 能够检测到这个属性的变化并触发视图更新。

以上。

相关推荐
行思理31 分钟前
UniApp 从Vue2升级为Vue3需要注意哪些方面
javascript·vue.js·uni-app·vue3·vue2
逆旅行天涯2 小时前
【解决】vue 弹窗后面页面可以滚动问题
前端·javascript·vue.js
Qiyandays2 小时前
vue + Lodop 制作可视化设计页面 实现打印设计功能(四)
前端·vue.js·typescript
二豆是富婆8 小时前
vue3 element plus table 滚动到指定位置
javascript·vue.js·elementui
学前端搞口饭吃9 小时前
vue2-ssr从vue-cli搭建项目改造服务端渲染+打包上线部署
前端·javascript·vue.js
鱼在在9 小时前
uni-app 聊天界面滚动到消息底部
javascript·uni-app·vue
anyup_前端梦工厂9 小时前
Vue 中常用的基础指令
前端·javascript·vue.js
计算机学姐10 小时前
基于python+django+vue的农业管理系统
开发语言·vue.js·后端·python·django·pip·web3.py
计算机程序设计开发10 小时前
小说阅读网站登录注册搜索小说查看评论前后台管理计算机毕业设计/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序
数据库·vue.js·spring boot·java-ee·课程设计·计算机毕业设计·数据库管理系统
宝子向前冲11 小时前
React中九大常用Hooks总结
前端·javascript·react.js