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

以上。

相关推荐
一只小风华~7 分钟前
HTML前端开发:JavaScript 获取元素方法详解
前端·javascript·html
jstart千语13 分钟前
【vue3学习】vue3入门
前端·javascript·vue.js·typescript·vue
一个儒雅随和的男子14 分钟前
Vue中虚拟DOM的原理与作用
前端·javascript·vue.js
HarryHY16 分钟前
Vue 自动导入函数和变量插件 unplugin-auto-import
前端·javascript·vue.js
Monly2118 分钟前
Vue:Form正则校验
前端·javascript·vue.js
向明天乄20 分钟前
Maotu流程图编辑器:Vue3项目中的集成实战与自定义流程开发指南
javascript·编辑器·vue·流程图
全宝32 分钟前
🔢前端解决浮点数运算精度丢失的问题
前端·javascript
前端双越老师38 分钟前
学不动了?没事,前端娱乐圈也更新不动了
javascript·react.js·ai编程
江城开朗的豌豆39 分钟前
JavaScript篇:偷懒也有理!事件代理让我少写一半代码
前端·javascript·面试
ai产品老杨1 小时前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript