uni-app switch组件如何动态设置checked

uni-app switch组件如何动态设置checked

类别 信息
产品分类 uniapp/小程序/微信
操作系统 Windows
操作系统版本 Win10
开发工具 HBuilderX
工具版本 2.9.8
第三方工具 1.03.2010240
基础库版本 2.12.1
项目创建方式 HBuilderX

示例代码：

<template>  
    <view class="container">  
        <view class="" v-for="(item,index) in list" :key="index">  
            {{item.bol}}  
            <switch :checked="item.bol" [@change](/user/change)="ChangeBol($event,index)" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: [{bol:true}]  
            }  
        },  
        methods: {  
            ChangeBol(e,i){  
                this.list[i].bol = false  
            }  
        }  
    }  
</script>

操作步骤：

<template>  
    <view class="container">  
        <view class="" v-for="(item,index) in list" :key="index">  
            {{item.bol}}  
            <switch :checked="item.bol" [@change](/user/change)="ChangeBol($event,index)" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: [{bol:true}]  
            }  
        },  
        methods: {  
            ChangeBol(e,i){  
                this.list[i].bol = false  
            }  
        }  
    }  
</script>

预期结果：

@change方法里面把checked改为false,switch显示状态是未选中

实际结果：

@change方法里面把checked改为false,switch显示状态是选中

bug描述：

在Switch @change方法里面把checked改为false,switch显示状态是选中的。使用uni编译成小程序有问题，用小程序原生试没问题。


更多关于uni-app switch组件如何动态设置checked的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

未复现您说的问题。

更多关于uni-app switch组件如何动态设置checked的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你新建一个项目把我这代码复制上去就能触发

演示视频我发了，

在吗？复现了吗？

这是演示视频，一个是小程序一个是uniapp的

在uni-app中，switch组件的checked状态需要通过数据绑定来动态控制。根据你的代码，问题出在数据更新后视图没有及时响应。建议修改ChangeBol方法如下：

ChangeBol(e, i){
    this.$set(this.list, i, {
        ...this.list[i],
        bol: false
    })
}

或者使用Vue的响应式方法：

ChangeBol(e, i){
    this.list[i].bol = false
    this.$forceUpdate()
}
回到顶部