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

以上。

相关推荐
lancyu2 小时前
# Agent Loop:AI Agent 的唯一直心骨
开发语言·javascript·人工智能
半个落月3 小时前
JavaScript 单例模式详解:从唯一实例到按钮事件
javascript
weixin_BYSJ19874 小时前
springboot智慧公共交通系统---附源码51123
java·javascript·spring boot·python·django·flask·php
sir.山4 小时前
在 Vue 3 项目中使用 Mock 数据
前端·vue.js·vue3·vite
你别说话了14 小时前
Vue项目解决跨域
前端·javascript·vue.js
指尖时光.14 小时前
Three.js 超全入门综合案例
开发语言·javascript·ecmascript
唐青枫14 小时前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript
学习星球17 小时前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
YuJie19 小时前
JSBridge 基础知识
前端·javascript
默_笙19 小时前
🍕 后端接口还没写好,前端已经跑起来了?Mock 数据 + axios 接口层,前后端再也不互相"等"
前端·javascript