uniapp双向绑定switch开关选择器

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('用户点击取消');
						}
					}
				});
			}
		},
  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值