uniapp怎么改变checkbox选中状态

小羊要吃狼

记录一个 uniapp-checkbox 如何动态改变勾选状态

场景：未勾选状态下用户点击勾选框，弹出确认和取消，点击确定则默认勾选，点击取消，恢复成不勾选状态。

[JavaScript] 纯文本查看 复制代码

<checkbox-group @change="checkboxChange" name="limitarea"> <label>
                <checkbox value="1" :checked="limitArea" /> <text>限定地区</text>
        </label> </checkbox-group>
<script>
        export default {
                data() {
                        return {
                                limitArea: 0
                        }
                },
                methods: {
                        checkboxChange: function(e) {
                                var self = this;
                                if (e.detail.value.length > 0) {
                                        uni.showModal({
                                                title: '限定地区',
                                                content: '限定地区，可能需要等待较长时间',
                                                confirmText: "确定",
                                                cancelText: "取消",
                                                success: function(res) {
                                                        if (res.confirm) {
                                                                self.limitArea = 1;
                                                        } else {
                                                                self.limitArea = 0;
                                                        }
                                                }
                                        });
                                } else {
                                        this.limitArea = 0;
                                }
                        }
                },
                components: {}
        }
</script>

上面的:checked="limitArea" ，显示状态与limitArea 进行了绑定。但是发现虽然点击了取消， limitArea 值变成了0，按道理勾选框应该为不勾选，但是显示的勾选状态还是选中状态。什么原因我没弄明白，解决办法：

[JavaScript] 纯文本查看 复制代码

checkboxChange: function(e){ var self = this; if( e.detail.value.length > 0 ){//点击勾选 self.limitArea = 1;  //
*****加上这句代码******* uni.showModal({ title: '限定地区', content: '限定地区，可能需要等待较长时间', confirmText: "确定", cancelText: "取消",
success: function (res) { if (res.confirm) { self.limitArea = 1; }else{ self.limitArea = 0; } } }); }else{
this.limitArea = 0; } }