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

以上。

相关推荐
記億揺晃着的那天2 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing3 小时前
ByteDance——jy真题
前端·javascript·面试
真的想不出名儿3 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
阳光阴郁大boy3 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
sorryhc4 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy4 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq4 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开4 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
技术钱6 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
技术钱6 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript