uniapp checkbox在无法选中

uniapp checkbox在无法选中

<template>  
    <view>  
        <betterScroll title="选择库存">  
            <view class="cu-bar bg-white solid-bottom">  
                <view class="action">  
                    <text class="cuIcon-title text-theme"></text>  
                    所需试剂  
                </view>  
            </view>  
            <view class="bg-white padding">  
                <view class="">  
                    <text class="text-black">{{ reagent.CommonName }}</text>  
                    <text class="text-gray">(规格:{{ reagent.Model }})</text>  
                </view>  
                <view class="flex justify-between">  
                    <view class="">  
                        <view class="cu-tag bg-orange" v-if="reagent.Label">{{ reagent.Label }}</view>  
                        <view class="cu-tag bg-orange" v-if="reagent.Consistency">{{ reagent.Consistency }}</view>  
                        <view class="cu-tag bg-red" v-if="reagent.Brand">{{ reagent.Brand }}</view>  
                    </view>  
                    <view class="">  
                        <view class="cu-capsule radius">  
                            <view class="cu-tag bg-olive">领用量</view>  
                            <view class="cu-tag line-olive">{{ reagent.Amount }}</view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
            <view class="cu-bar bg-white solid-bottom margin-top">  
                <view class="action">  
                    <text class="cuIcon-title text-theme"></text>  
                    库存参考  
                </view>  
            </view>  
            <view class="">  
                <view class="flex bg-white">  
                    <view class="width-35 text-bold">有效期</view>  
                    <view class="width-35 text-bold">位置</view>  
                    <view class="width-20 text-bold">剩余量</view>  
                    <view class="width-10 text-bold"></view>  
                </view>  
            </view>  
            <scroll-view  
                scroll-y="true"  
                class="bg-white"  
                :style="{ height: scrollH + 'px' }"  
                @scrolltoupper="upper"  
                @scrolltolower="lower"  
                @scroll="scroll"  
            >  
                <view class="">  
                    <block v-for="(item, index) in searchArr" :key="item.Reagent.Id">  
                        <view class="flex bg-white dashed-bottom">  
                            <view class="width-35 text-sm">{{ item.Reagent.ExpiryTime | format }}</view>  
                            <view class="width-35 text-sm">{{ item.Box.Name + '-' + item.Container.Name }}</view>  
                            <view class="width-20 text-sm">{{ item.Reagent.Volumn }}</view>  
                            <view class="width-10 text-sm">  

                                <checkbox-group @change="checkboxChange($event, index)">  
                                    <label><checkbox :value="index" :checked="item.select" color="#015478" style="transform:scale(0.7)" /></label>  
                                </checkbox-group>  
                            </view>  
                        </view>  
                    </block>  
                </view>  
            </scroll-view>  
            <view class="button-wrap flex bg-white">  
                <view class="flex-sub padding"><button class="cu-btn bg-green shadow full-height full-width" @tap="confrimforClick">确认选择</button></view>  
                <view class="flex-sub padding"><button class="cu-btn bg-blue shadow full-height full-width" @tap="barCodeSelect">扫码选择</button></view>  
            </view>  
        </betterScroll>  
    </view>  
</template>  

<script>  
import { reagentDetail } from '../../common/js/api/reagent-api.js';  

import { mapMutations } from 'vuex';  
import { SET_STOCK_LIST } from '../../store/mutation-types.js';  
export default {  
    data() {  
        return {  
            reagent: {},  
            searchArr: [],  
            scrollTop: 0  
        };  
    },  
    onLoad(option) {  
        console.log(option);  
        this.reagent = JSON.parse(option.item);  
        this.getSearchArr();  
    },  
    created() {},  
    computed: {  
        scrollH() {  
            let WHeight = uni.getSystemInfoSync().windowHeight;  
            return WHeight - this.CustomBar - 50 - 86 - 50 - 15 - 28 - 50 + 10;  
        }  
    },  
    methods: {  
        ...mapMutations({  
            setStockList: SET_STOCK_LIST  
        }),  
        barCodeSelect() {  

            uni.scanCode({  
                onlyFromCamera: true,  
                scanType: ['barCode'],  
                success: function(res) {  
                    const barCodeIndex = this.searchArr.findIndex(item => item.Reagent.Barcode);  
                    if (barCodeIndex === -1) {  
                        uni.showModal({  
                            title: '提示',  
                            showCancel: false,  
                            content: '未找到该条码对应的试剂'  
                        });  
                    } else {  
                        this.searchArr[barCodeIndex].select = true;  
                        uni.showToast({  
                            title: '扫码选择成功',  
                            icon: 'success'  
                        });  
                    }  
                }  
            });  
        },  
        checkboxChange(event, index) {  
            if (event.detail.value.length === 0) {  
                this.searchArr[index].select = false;  
            } else {  
                this.searchArr[index].select = true;  
            }  
        },  
        async getSearchArr() {  
            let [err, res] = await reagentDetail(this.reagent.id);  
            if (!this.$http.errorCheck(err, res)) return;  
            for (let i = 0; i < res.data.response.length; i++) {  
                res.data.response[i].select = false;  
            }  
            this.searchArr = res.data.response;  
        },  
        upper(e) {  
            console.log(e);  
        },  
        lower(e) {  
            console.log(e);  
        },  
        scroll(e) {  
            console.log(e);  
        },  
        confrimforClick() {  
            const searchArr = this.searchArr.filter(item => item.select);  
            if (searchArr.length !== this.reagent.Amount) {  
                uni.showModal({  
                    title: '提示',  
                    showCancel: false,  
                    content: '选择的数量不正确，请重新选择，所需数量为' + this.reagent.Amount  
                });  
            } else if (searchArr.length === 0) {  
                uni.showModal({  
                    title: '提示',  
                    showCancel: false,  
                    content: '请选择需要出库的试剂'  
                });  
            } else {  
                this.setStockList(searchArr);  
                uni.navigateBack();  
            }  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  
.width-10 {  
    width: 10%;  
    text-align: center;  
}  
.width-20 {  
    width: 20%;  
    text-align: center;  
}  
.width-35 {  
    width: 35%;  
    text-align: center;  
}  
.button-wrap {  
    height: 100rpx;  
    box-sizing: border-box;  
}  
.padding {  
    padding: 20rpx 50rpx;  
}  
</style>