vue开发uniapp switch组件change弹窗取消后恢复原状态

vue3开发uniapp在使用switch组件，需求是改变switch，弹出一个选择提示框，选择“确认”调用API提交后端，再根据后端的结果来更新视图；选择“取消”则不掉用，switch组件的状态不变。

实际开发问题

vue3按开发文档正常是用 checked 来绑定是否选中，用@change事件来处理。实际情况是不管结果如何，switch状态在change过后就已经是改变了，在:checked绑定的值恢复原值时，switch开关状态显示无法还原。通过AI过后，用v-model来绑定值，结果还是不行。也曾怀疑过是否vue3认为值没有变导致视图没有更新，对switch组件:checked的数组操作做了处理，结果还是不行。最后用@click事件来处理也一样不行。

解决问题方法

禁用switch的事件，通过变量双向绑定控制开关的状态。简单的意思是只把switch组件当成一个显示的，事件不通过该组件。

<view class="details-title">取消维修</view>
<view class="details-info" @click="changeNeedrepair(item.id, item.serialNum)">
	<switch 
		style="transform:scale(0.7)"
		:checked="item._switchChecked"
		:disabled="true"
	/>
</view>

const changeNeedrepair = (deviceId, serialNum) => {
	const device = deviceInfo.value.find(d => d.id === deviceId)
	if (!device) return
	
	// 已经取消维修，不允许操作
	if (device.needRepair === 0) return
	//device._switchChecked = !device._switchChecked
	
	const originalNeedRepair = device.needRepair
	const originalChecked = device._switchChecked
			
	uni.showModal({
		title: '取消维修确认',
		content: `确认不维修设备 ${serialNum} 吗？确认后不能修改！`,
		success: (res) => {
			if (res.confirm) {
		  uni.showLoading({
			title: `请求中`,
			mask: true
		  })
				setDeviceNeedRepair({
					needRepair: 0, // true -> 0(取消维修), false -> 1(需要维修)
					deviceId: deviceId,
					repairId: bill.value.repairId,
				}).then(res => {
			uni.hideLoading()
					if (res.code == 200) {
						device.needRepair = 0
						device._switchChecked = true // 保持开启
						uni.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 1000
						})
						loadBillDetail(billId.value)
						
					} else {
						uni.showToast({
							title: res.message || '操作失败',
							icon: 'none',
							duration: 2000
						})
						device.needRepair = 1
						device._switchChecked = originalChecked
					}
				})
			} else {
				// 取消
				console.log('originalChecked', originalChecked)
						device.needRepair = 1
				device._switchChecked = originalChecked
			}
		}
	})
}