背景
已知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);
},
-
参数
checked
: 这个参数表示开关的状态,true
表示开关被打开,false
表示开关被关闭。 -
this.switchValue = checked ? 1 : 0;
: 这行代码使用三元运算符,根据checked
的值来设置this.switchValue
。如果checked
为true
,则this.switchValue
被设置为1
;如果为false
,则设置为0
。 -
this.$set(this.info, 'save_if_fail', this.switchValue);
: 这行代码使用 Vue 的$set
方法来更新this.info
对象中的save_if_fail
属性。这个方法确保 Vue 能够检测到这个属性的变化并触发视图更新。
以上。