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

以上。

相关推荐
网络点点滴5 分钟前
Vue3 全局API转移到应用对象
前端·javascript·vue.js
whuhewei9 分钟前
useCountDown (React Hooks)倒计时
前端·javascript·react.js
终端鹿14 分钟前
插槽(slot):默认插槽、具名插槽、作用域插槽实战
前端·javascript·vue.js
Amumu1213839 分钟前
工程化: webpack介绍和基础用法
前端·javascript·工程化
SuperEugene1 小时前
前端组件三层架构:页面/业务/基础组件划分,高内聚低耦合|组件化设计基础篇
前端·javascript·vue.js·架构·前端框架·状态模式
前端郭德纲1 小时前
JavaScript原生开发与鸿蒙原生开发对比
开发语言·javascript·harmonyos
百撕可乐1 小时前
NextJS官网实战02:项目的基础骨架搭建
前端·javascript·react.js
竹林8182 小时前
Web3前端开发:使用ethers.js监听智能合约事件
javascript·智能合约
张元清2 小时前
不用 WebSocket 库,在 React 中构建实时功能
前端·javascript·面试