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

以上。

相关推荐
Miracle_G41 分钟前
每日一个知识点:JavaScript 箭头函数与普通函数比较
javascript
unfetteredman41 分钟前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
HANK1 小时前
KLineChart 绘制教程
前端·vue.js
程序员小续2 小时前
React 官方严令禁止:Hook 不能写在 if/else,真相竟然是…
前端·javascript·程序员
Juchecar2 小时前
Naive UI 学习指南 - Vue3 初学者完全教程
前端·vue.js
小奋斗2 小时前
深入浅出:JavaScript中 三大异步编程方案以及应用
javascript·面试
尝尝你的优乐美3 小时前
封装那些Vue3.0中好用的指令
前端·javascript·vue.js
敲代码的彭于晏3 小时前
localStorage 不够用?试试 IndexedDB !
前端·javascript·浏览器
chxii3 小时前
5.4 4pnpm 使用介绍
前端·javascript·vue.js
好好好明天会更好3 小时前
Vue 中 slot 的常用场景有哪些
前端·vue.js