当前位置: 首页 > 工具软件 > switchClass > 使用案例 >

uniapp双向绑定switch开关选择器

应子真
2023-12-01

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('用户点击取消');
						}
					}
				});
			}
		},
 类似资料: