首先項(xiàng)目中購(gòu)物車列表是v-for 動(dòng)態(tài)渲染的數(shù)據(jù)，其中checkbox組件包含在每個(gè)li中動(dòng)態(tài)渲染出來初嘹，在做全選的時(shí)候是沒有問題的，因?yàn)槿x按鈕是在頁面寫死的，在做單個(gè)按鈕選擇的時(shí)候this.$refs.name.checked獲取得到undefined茫死。

1.jpg

這一點(diǎn)官方已經(jīng)早就交代過，動(dòng)態(tài)渲染的ref可能不會(huì)獲取到DOM

QQ截圖20190715171110.jpg

然而履羞，實(shí)際發(fā)現(xiàn)峦萎，$refs.name獲取的是一個(gè)數(shù)組，數(shù)組點(diǎn)屬性肯定是undefined忆首。
那么首先要獲取到每一個(gè)checkbox的checked屬性肯定需要用到index爱榔，那么，在v-for的時(shí)候就可以把index傳進(jìn)來糙及，并且傳給@changde方法中详幽，這樣就可以獲取到每個(gè)checkbox的checked了，然后關(guān)聯(lián)判斷選擇狀態(tài)浸锨，代碼如下：

組件中代碼

                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">刪除</a>
                    </div>
                    <div class="mui-slider-handle">
                        <div class="cart-left">
                            <div class=" mui-checkbox">
                                <input name="checkbox" value="Item 1" type="checkbox" ref="checkbox" @change="checked(index)">
                            </div>
                        </div>
                        <div class="cart-image">
                            <img :src="item.msrc" alt="">
                        </div>
                        <div class="cart-right">
                            <p>{{item.title}}</p>
                            <p class="maxnum">庫存：<span id="maxnum">{{item.maxnum}}</span></p>
                            <p class="cart-price"><span>￥{{item.price}}</span>
                                <cartnumbox :initcount="item.count" :maxnum="item.maxnum" @getnum="getnum"></cartnumbox>
                            </p>
                        </div>
                    </div>
                </li>

methods

            checkAll() {
                    if (this.$refs.checkAll.checked) {
                        mui(this.$refs.checkbox).each(function() {
                            this.checked = true;
                        });
                        this.checkednum = mui(this.$refs.checkbox).length;
                    } else {
                        mui(this.$refs.checkbox).each(function() {
                            this.checked = false;
                        });
                        this.checkednum = 0;
                        this.checkboxsum = 0;
                    }
                    console.log('總數(shù)' + this.checkboxsum);
                    console.log('選擇數(shù)' + this.checkednum);
                },
                //單個(gè)選擇
                checked(index) {
                    this.checkboxsum = mui(this.$refs.checkbox).length;
                    console.log(this.$refs.checkbox[index].checked);
                    if (this.$refs.checkbox[index].checked) {
                        //選擇的個(gè)數(shù)保存到data中
                        this.checkednum++;
                    } else {
                        this.checkednum--;
                    }
                    if (this.checkednum == this.checkboxsum) {
                        this.$refs.checkAll.checked = true;
                    } else {
                        this.$refs.checkAll.checked = false;
                    }
                    console.log('總數(shù)' + this.checkboxsum);
                    console.log('選擇數(shù)' + this.checkednum);
                }

最后效果

checkbox1.gif