uni-app switch组件的:checked属性动态设置后不起作用 群友说直接给@click事件但也不行

uni-app switch组件的:checked属性动态设置后不起作用 群友说直接给@click事件但也不行

Image from dCloud

Image from dCloud

Image from dCloud

Image from dCloud

Image from dCloud

Image from dCloud


更多关于uni-app switch组件的:checked属性动态设置后不起作用 群友说直接给@click事件但也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

20 回复

在switch上面覆盖一层，通过点击事件操作覆盖层动态更改switch的绑定值 <switch class="item_right" color="#1890FF" :checked='workOn' /> <text @click=“setWStatus” style=“position: absolute;display: inline-block;width: 50%;right: 0;height:70upx;”></text>
setWStatus(e){ let that=this var type; uni.showModal({ title:“提示”, content:“确认修改维修状态？”, success(con) { if(con.confirm){ setWorkStatus({RtuAuth:uni.getStorageSync(‘token’),type:type}).then(res=>{ console.log(res) if(res.code==2000){ that.workOn=!that.workOn showToast(“已更改”) }else{ showToast(“操作失败！”) } })
}else if(con.cancel){
showToast(“取消修改！”)
}
}
})

    },<br><img src="https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/answer/20210426/b24dde05d42af1132c7afef6bf753e72.png" class="img-polaroid" alt=""><br><img src="https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/answer/20210426/19f760d5ac510ac6827c0b7f805e74e3.png" class="img-polaroid" alt=""><br>

更多关于uni-app switch组件的:checked属性动态设置后不起作用 群友说直接给@click事件但也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你这个是对的，覆盖住，点击假的，调接口，成功了才改变下面的。

更新方法有问题
this.$set(this.lockWarnChangeInfor, “isOpen”, false)
<template>
<view class="content">
<view>
<switch :checked="isChecked"></switch>
</view>
<button @click=“buttonClick”>set switch</button>
</view>
</template>

<script> export default { data() { return { title: 'Hello', isChecked: false } }, onLoad() { }, methods: { buttonClick(e) { this.isChecked = !this.isChecked; } } } </script>

大佬,这个this.$set(this.lockWarnChangeInfor, “isOpen”, false) 用this.$set不起作用,难道是@change不能用这个事件?另外一个滑块切换效果,我不可能再在下面像你这样加个button按钮来给@click事件来控制上面的滑块的,哪有这种ui页面呀,你看我上面贴的图,怎么可能再去加button按钮来配合使用?

大佬应该是@change事件的问题,但是我直接给<switch @click=“lockWarnChange($event,1)” :checked=“lockWarnChangeInfor.isOpen” /> 也不行,哎,你上面的回复真的没用

例子是演示如何绑定属性，@change this.$nextTick(()=>{}) 后处理

用@change this.$nextTick(()=>{}) + this.$set试过了,还是不行,

<template> <view class="content"> <switch :checked="isChecked" @change="switchchange"></switch> </view> </template> <script> export default { data() { return { isChecked: false } }, onLoad() {}, methods: { switchchange(e) { // TODO H5端内置组件实现的有问题，使用v-model无效，先这样解决 this.isChecked = !this.isChecked; var self = this; setTimeout(function() { self.isChecked = !self.isChecked; }, 3000) } } } </script>

大佬,哎,你怎么就不明白我说的意思呢,我的意思不是要this.isChecked = !this.isChecked; 不是这样取反,我的意思是我通过切换来设置滑块切换,但是设置调接口设置失败了,希望他还是false,不要true, 就是希望点击后,通过判断接口的res.state != 0的时候说明设置失败了,继续让this.isChecked = false ,但是这样赋值设置了不起作用,你这样取反,肯定会由灰色变成高亮呀,我的意思是点击切换,通过赋值,让原来的灰色,继续是灰色,而不是高亮,懂了?

回复 阁楼庭院: 不需要取反，去掉 setTimeout 代码就可以了， 直接赋值，setTimeout是模拟你的业务逻辑


<template> <view class=""> 设置通知 <switch @change="bian" :checked="iserr" /> </view> </template> <script> export default{ data(){ return { iserr:false, res:{status:422} } }, methods:{ bian(){ //res.status != 0 模拟通过这个滑块,与后台交互,调后台接口,res.status != 0 表示设置失败状态码不为0,表示设置失败, //设置失败的话,肯定希望滑块还是灰色的,不是高亮的,所以this.iserr = false ,设置成功才让this.iserr = true //重点重点,我不是做this.iserr = !this.iserr 这个效果,别写这个效果了 if(this.res.status != 0){ this.iserr = false } else { this.iserr = true } console.log(this.res.status) console.log(this.iserr) } } } </script> <style> </style>

就是做这个测试页面,测试了,不行,还是会高亮,就这个简单的逻辑和场景,真的不复杂,但是switch的状态就是不对

大佬,我上面把最近的测试代码贴出来了,就是不行,直接赋值不起作用,也打印了赋值成false还是高亮了

<template> <view class="content"> <switch :checked="isChecked" @change="switchchange"></switch> </view> </template> <script> export default { data() { return { isChecked: false , res:{status:422} } }, onLoad() {}, methods: { switchchange(e) { // TODO H5端内置组件实现的有问题，使用v-model无效，先这样解决 this.isChecked = !this.isChecked; this.$nextTick(()=>{ if(this.res.status == 0){ this.isChecked = true } else { this.isChecked = false } console.log(this.res.status) console.log(this.isChecked) }) } } } </script>

这样处理加 // TODO H5端内置组件实现的有问题，使用v-model无效，先这样解决 this.isChecked = !this.isChecked; 加this.$nextTick(()=>{}) 感谢大佬指导

你现在是一个switch控件可以这样写，如果是循环出来的多个一样的该怎么处理？！就是业务处理失败的，点击的那个switch不要改状态？！怎么只回退点击的那个呢？！

有人回复么?别沉

不是bug，原因是这样子写，你的初始值一开始为false, 后面的处理还是false，导致视图没更新，建议change的第一步就先对绑定的变量赋值 this.$set(this.lockwornChangeInfor, ‘isOpen’, e.detail.value)

回复 7***@qq.com: 正解~

从截图来看，问题出在switch组件的双向绑定上。正确的做法应该是使用v-model而不是:checked属性来实现双向绑定。在uni-app中，switch组件应该这样使用：

<switch v-model="switchValue" [@change](/user/change)="switchChange"/>

然后在data中定义switchValue：

data() {
  return {
    switchValue: false
  }
},
methods: {
  switchChange(e) {
    console.log('switch状态改变', e.detail.value)
  }
}

出现问题的原因可能是：

  1. 使用了:checked单向绑定而不是v-model双向绑定
  2. 在@click事件中直接修改值而没有通过v-model同步

解决方案：

  1. 将:checked改为v-model
  2. 确保数据修改是通过v-model自动同步的
  3. 使用@change事件而不是@click来监听状态变化

如果需要在代码中动态修改switch状态，直接修改绑定的数据即可，例如：

this.switchValue = true
回到顶部