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

以上。

相关推荐
前端君6 小时前
实现最大异步并发执行队列
javascript
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军9 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy9 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端9 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿9 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL9 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉9 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~10 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js