vue購(gòu)物車(chē)多層嵌套，全選反選，如何響應(yīng)更新價(jià)格，如下圖和代碼

想要的效果

全選反選，實(shí)時(shí)響應(yīng)更新價(jià)格

問(wèn)題說(shuō)明

1.一個(gè)購(gòu)物車(chē)下有多個(gè)商家，一個(gè)商家下有多個(gè)商品
2.3勾選的時(shí)候，所有(商家，商品)的復(fù)選框都是選中狀態(tài)，2勾選的時(shí)候，2下面的1都是選中狀態(tài)，只要有其中一個(gè)1沒(méi)有勾選，2都還是未選中狀態(tài)
3.勾選中的價(jià)格，都要實(shí)時(shí)更新到總價(jià)

圖片

為了測(cè)試方便，可以復(fù)制下面的html，直接運(yùn)行，(沒(méi)有圖片)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .app-cart {
            padding-bottom: 100px;
            background-color: #f5f5f5;
        }
        
        .app-cart .cart-header {
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }
        
        .cart-main .main-item {
            margin-bottom: 10px;
            background-color: #fff;
            box-sizing: border-box;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        
        .cart-main .main-item .item-top {
            display: flex;
            align-items: center;
            height: 40px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
        }
        
        .cart-main .main-item .item-top input {
            flex: 0 0 50px;
            width: 50px;
        }
        
        .cart-main .main-item .item-top span {
            flex: 1;
        }
        
        .cart-main .main-item .item-middle .middle-list {
            display: flex;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
        }
        
        .cart-main .main-item .item-middle .middle-list .list-left {
            flex: 0 0 50px;
            width: 50px;
            text-align: center;
        }
        
        .cart-main .main-item .item-middle .middle-list .list-center {
            flex: 0 0 100px;
            width: 100px;
        }
        
        .cart-main .main-item .item-middle .middle-list .list-right {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        
        .cart-main .main-item .item-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            border-top: 1px solid #ccc;
        }
        
        .cart-footer {
            position: fixed;
            left: 0;
            bottom: 60px;
            width: 100%;
            height: 50px;
            display: flex;
            background-color: #fff;
            box-sizing: border-box;
            border-top: 1px solid #ccc;
        }
        
        .cart-footer .footer-left {
            flex: 0 0 50px;
            width: 50px;
            display: flex;
            align-items: center;
            margin-left: 20px;
        }
        
        .cart-footer .footer-center {
            flex: 1;
            text-align: right;
        }
        
        .cart-footer .footer-right {
            flex: 0 0 100px;
            width: 100px;
            background-color: #ff0000;
            color: #fff;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="app-cart">
            <header class="cart-header">購(gòu)物車(chē)</header>
            <main class="cart-main">
                <div v-for="item1 in cartData" :key="item1.id" class="main-item">
                    <div class="item-top">
                        <input type="checkbox" v-model="item1.checked" @change="selectItem1(item1)">
                        <span>{{item1.shop_name}}</span>
                    </div>
                    <div class="item-middle">
                        <div v-for="(item2,index2) in item1.goodsList" :key="item2.id" class="middle-list">
                            <div class="list-left">
                                <input type="checkbox" @change="selectItem2(item1)" v-model="item2.checked">
                            </div>
                            <div class="list-center">
                                <!-- <img v-lazy="IMAGESURL + item2.goods_img"> -->
                            </div>
                            <div class="list-right">
                                <p>{{item2.goods_name}}</p>
                                <div>
                                    <span>單價(jià):{{item2.goods_price}}</span>
                                    <span>數(shù)量:{{item2.cart_goods_number}}</span>
                                </div>
                                <p>總價(jià):{{item2.goods_price*item2.cart_goods_number}}</p>
                            </div>
                        </div>

                    </div>
                </div>
            </main>
            <footer class="cart-footer">
                <div class="footer-left">
                    <input type="checkbox" v-model="checkAll" @change="selectAll">
                    <p>全選</p>
                </div>
                <div class="footer-center">
                    合計(jì):{{allPrice}}
                </div>
                <div class="footer-right">
                    結(jié)算
                </div>
            </footer>

        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    cartData: [{
                        shop_id: 4,
                        shop_name: "honor之家",
                        checked: false,
                        goodsList: [{
                            cart_goods_number: 3,
                            goods_name: "honor7x",
                            goods_img: "honor7x.png",
                            goods_price: 1299,
                            goods_id: 3,
                            checked: false
                        }, {
                            cart_goods_number: 2,
                            goods_name: "honor6x",
                            goods_img: "honor6x.png",
                            goods_price: 1199,
                            goods_id: 4,
                            checked: false
                        }, {
                            cart_goods_number: 5,
                            goods_name: "honor5x",
                            goods_img: "honor5x.png",
                            goods_price: 1099,
                            goods_id: 5,
                            checked: false
                        }]
                    }, {
                        shop_id: 1,
                        shop_name: "iPhone之家",
                        checked: false,
                        goodsList: [{
                            cart_goods_number: 1,
                            goods_name: "iPhonex",
                            goods_img: "iPhonex.png",
                            goods_price: 8888,
                            goods_id: 1,
                            checked: false
                        }]
                    }],
                    allPrice: 0,
                    checkAll: false
                };
            },
            methods: {
                // 全選
                selectAll() {
                    this.cartData.forEach(item => {
                        item.checked = this.checkAll;
                        item.goodsList.forEach(item => {
                            item.checked = this.checkAll;
                        });
                    });
                    if (this.checkAll == false) {
                        this.allPrice = 0;
                    }
                },
                // 第一層選擇
                selectItem1(item1) {
                    item1.goodsList.forEach(i => {
                        i.checked = item1.checked;
                    });
                },
                // 第二層選擇
                selectItem2(item1) {
                    let item1Price = 0;
                    let lengths = item1.goodsList.length;
                    let checkeds = item1.goodsList.filter(i => {
                        return i.checked == true;
                    });
                    if (lengths == checkeds.length) {
                        item1.checked = true;
                    } else {
                        item1.checked = false;
                    }
                    checkeds.forEach(item => {
                        this.allPrice += item.goods_price * item.cart_goods_number;
                    });
                },

            },
        })
    </script>
</body>

</html>

回答

編輯回答