問題

只有最后一個商店下面的商品勾選時，可以響應到總價

前面的商店，勾選不起作用

代碼

<template>
    <div class="app-cart">
        <header class="cart-header">購物車</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>單價:{{item2.goods_price}}</span>
                                <span>數(shù)量:{{item2.cart_goods_number}}</span>
                            </div>
                            <p>總價:{{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">
                合計:{{allPrice2}}
            </div>
            <div class="footer-right">
                結算
            </div>
        </footer>

    </div>
</template>

<script>
export default {
    data() {
        return {
            cc: 0,
            cartData:[],
            allPrice: 0,
            checkAll: false,
            dd: 0,
            arr1: []
        };
    },
    computed: {
        allPrice2() {
            let allPrice2Number = 0;
            let checkArr = [];
            this.cartData.forEach(item1 => {
                checkArr = item1.goodsList.filter(item2 => item2.checked == true);
            });
            console.log(checkArr);
            checkArr.forEach(item => {
                allPrice2Number += item.cart_goods_number * item.goods_price;
            });
            return allPrice2Number;
        }
    },
    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;
            // });
        },
        // 請求數(shù)據(jù)
        getcartData() {
            let userId = localStorage.getItem("userInfoId");
            axios
                .get(this.URL + "cartSelectGroupByUserId/" + userId)
                .then(response => {
                    this.cartData = response.data.data;
                })
                .catch(error => {
                    console.log(error);
                });
        }
    },
    created() {
        this.getcartData();
    }
};
</script>

相應的數(shù)據(jù)字段

            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
                        }
                    ]
                }
            ],

style

    <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>