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。如果 checked 为 true,则 this.switchValue 被设置为 1;如果为 false,则设置为 0。

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

以上。

相关推荐
এ慕ོ冬℘゜4 小时前
ES Promise.all/ Promise.race
前端·javascript·elasticsearch
只睡四小时5 小时前
端侧推理:face-api.js 首屏 92% 是白下载的
开发语言·javascript·人脸识别·ecmascript·tensorflow.js·face-api.js·端侧推理
用户83134859306986 小时前
Vue3 v-for:常用用法与开发高频坑点
前端·javascript·vue.js
Funlang6 小时前
fun-ui 开源:把浏览器界面接回来
前端·javascript
2603_965896626 小时前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
忆挽篱笙歌7 小时前
进程替换函数与shenll命令行解释器
前端·javascript·算法
小冯不疯7 小时前
688 / 拼多多 / 淘特三类供货链路:从采购单到应付凭证的 4 段对账
javascript
moshuying7 小时前
DeppInfer系列之 - 矩阵、注意力与 GPU:拆解 DeepGEMM 与 FlashMLA
前端·javascript·面试
Jack N8 小时前
【Strapi 系列之五】前端怎么接?Next.js + Tailwind 拉取 Strapi 数据(含代码)
开发语言·前端·javascript·strapi
weedsfly8 小时前
React 不可变数据:为什么页面“明明数据变了却不更新
前端·javascript·react.js