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

以上。

相关推荐
SuperEugene2 小时前
Vue生态精选篇:Element Plus 的“企业后台常用组件”用法扫盲
前端·vue.js·面试
Neptune12 小时前
JavaScript回归基本功之---类型判断--typeof篇
前端·javascript·面试
进击的尘埃2 小时前
微前端沙箱隔离:qiankun 和 wujie 到底在争什么
javascript
子兮曰3 小时前
后端字段又改了?我撸了一个 BFF 数据适配器,从此再也不怕接口“屎山”!
前端·javascript·架构
颜酱5 小时前
一步步实现字符串计算器:从「转整数」到「带括号与优化」
javascript·后端·算法
比尔盖茨的大脑5 小时前
事件循环底层原理:从 V8 引擎到浏览器实现
前端·javascript·面试
bluceli5 小时前
Vue 3 Composition API深度解析:构建可复用逻辑的终极方案
前端·vue.js
程序员ys5 小时前
前端权限控制设计
前端·vue.js·react.js
卓卓不是桌桌5 小时前
如何优雅地处理 iframe 跨域通信?这是我的开源方案
javascript·架构
滕青山6 小时前
腾讯域名拦截查询 在线工具核心JS实现
前端·javascript·vue.js