【修复日常bug】uni-app框架的switch组件的checked属性值动态绑定不生效

 

如上图所示，switch的开关是使用checked属性绑定的，并无双向绑定，下面来看代码。

<view class="value">
	<switch :checked="goodsItem.integralSelf" @change="integralSelfHandle" />
</view>

 

checked首次初始化默认值后，再去改变goodsItem.integralSelf变量值页面并无效果，变量值改变了，我猜测内部可能没有对checked属性做watch监听处理，所以导致视图没更新，据网友的说法是：

 

我尝试使用$set去处理，视图层仍然没有更新，也有可能是变量层级太深的原因：

this.$set(this.checkoutInfo.goods_list[0].goods[index2], "integralSelf", false)

---

然后我想到了一个方法，在switch组件外层添加一个变量isShowEle做if判断，先隐藏组件后显示，这样switch组件就会重新渲染数据了，唯一的缺点是按钮会有闪烁，这个闪烁时间可自行调节（我在代码设置了默认100毫秒），建议还是要做个定时器，毕竟页面加载需要耗时可能会导致switch按钮还是没生效。

<view class="value" v-if="!goodsItem.isShowEle">
	<switch :checked="goodsItem.integralSelf" @change="integralSelfHandle" />
</view>

this.$set(this.checkoutInfo.goods_list[0].goods[index2], "isShowEle", true) //先隐藏switch组件
this.$set(this.checkoutInfo.goods_list[0].goods[index2], "integralSelf", false) //修改checked绑定的变量值
this.$nextTick(()=>{
	setTimeout(()=>{
		this.$set(this.checkoutInfo.goods_list[0].goods[index2], "isShowEle", false) //显示switch组件
		this.$forceUpdate() //强制更新
	},100)
})

---

最终效果图如下：