uni中switch的checked属性只会在页面初始加载时有效,后来在手动修改时,并不更新视图。可以借鉴vue中的this.$set思想,将checked属性绑定的值封装成对象。
HTML:
<switch class="section-right" :checked="treatmentStatu.checked" @change="switchChange"/>
js:
data () {
return {
treatmentStatu: { checked: false },
}
methods: {
switchChange (e) {
let value = e.target.value
let that = this
this.$set(this.treatmentStatu, 'checked', value) // 将点击改变的状态赋给treatmentStatu.checked
if (value && !this.havePromise) {
uni.showModal({
title: '提示',
content: '您还没设置接诊承诺,是否前往设置',
success: function (res) {
if (res.confirm) {
that.$emit('changePage', 1)
console.log('用户点击确定')
} else if (res.cancel) {
that.$set(that.treatmentStatu, 'checked', false) // 手动修改switch的状态,视图会同步更新
console.log('用户点击取消');
}
}
});
}
},