vue怎么實現商品購物車全選反選

這篇“vue怎么實現商品購物車全選反選”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么實現商品購物車全選反選”文章吧。

項目需求：

實現一個購物車
全選框實現對商家和商品的全選
商家全選框實現對當前商家所有商品的全選
取消其中一個商品則取消對應商家全選和全選框
選中一個商家下的所有商品則勾選對應商家的全選框，不勾選全選框
選中所有商品則勾選所有商家全選框和全選框

我的思路：

1、通過對數據的簡單操作可實現更深層次的全選操作
2、vue.$set(object, key, value)給對象添加屬性可以更新視圖
3、通過es6的every判斷數組中是否每個元素都滿足條件，都滿足返回true，有一個不滿足則返回false

template：

<div class="box">
    <input type="checkbox" v-model="checkedAll" @change="checkAll"> 全選
</div>
<div class="list"  v-for="(val,k) in data" :key="k">
    <div class="box">
        <input type="checkbox" v-model="val.checked" @change="_checkAll(val)">
        {{val.seller}}
    </div>
    <ul v-for="(item,index) in val.goodsList" :key="index">
        <li>
            <input type="checkbox" v-model="item.checked" @change="handleCheck(item,index)">
            {{item.name}}
        </li>
    </ul>
</div>

scritpt層

var app = new Vue({
    el: "#app",
    data: {
        checkedAll: false, //控制是否全選
        data: [{
            seller: "商家1",
            goodsList: [{
                name: '商品1'
            }]
        }, {
            seller: "商家2",
            goodsList: [{
                name: '商品2'
            }, {
                name: '商品3'
            }]
        }] //數據
    },
    mounted() {
        this.data.forEach(item => {
            this.$set(item, "checked", false) //Vue 解決不能檢測到對象屬性的添加或刪除
                // item.checked = false; //如果為真實數據直接設置的對象改變值不會更新視圖
            if (item.goodsList) {
                item.goodsList.forEach((citem) => {
                    this.$set(citem, "checked", false)
                        // citem.checked = false;
                })
            }
        });
    },
    methods: {
        //全選
        checkAll() {
            this.data.forEach(item => {
                item.checked = this.checkedAll;
                if (item.goodsList) {
                    item.goodsList.forEach(citem => {
                        citem.checked = this.checkedAll;
                    })
                }
            })
        },
        //商家全選
        _checkAll(val, k) {
            val.goodsList.forEach(item => {
                item.checked = val.checked;
            });
            if (this.data.every(item => item.checked)) {
                this.checkedAll = true;
            } else {
                this.checkedAll = false;
            }

        },
        //商品選擇框
        handleCheck(item, index) {
            var check = []; //保存中間層是否被選中的布爾值
            this.data.forEach((items, index) => {
                if (items.goodsList) {
                    var bool = items.goodsList.every(citem => citem.checked);
                    if (bool) {
                        items.checked = true;
                    } else {
                        items.checked = false;
                    }
                    check.push(bool);
                }
            })
            if (check.indexOf(false) == -1) {
                this.checkedAll = true;
            } else {
                this.checkedAll = false;
            }
        },
    }
})

效果如下

以上就是關于“vue怎么實現商品購物車全選反選”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。