VUE设计购物车合计功能有时失误有时成功

合计功能代码
只要刷新页面，第一次点全选就不能计算总金额，如果第一次单点商品就可以计算
有时合计不到，有时又可以不知是为什么，要刷新才可以。
购物车的这些功能写在计算属性里面你这个只写了get方法还要写set方法我有一套类似的你可以看一下学习
<!DOCTYPE html>
<html lang='en'>

<head>
    <!-- 破除防盗链 -->
    <meta name='referrer' content='never'>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <!-- 引入的js文件 -->
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <title></title>
    <style>
        * {
            user-select: none;
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #app {
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }

        table {
            margin-top: 100px;
            width: 400px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id='app'>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <label for="qx">全选</label>
                    <input type="checkbox" id="qx" v-model="isAll">
                </td>
                <td>
                    商品名称
                </td>
                <td>
                    商品价格
                </td>
                <td>
                    商品数量
                </td>
            </tr>

            <tr v-for="(item,index) in iceCream" :key="item.id">
                <td>
                    <label :for="item.id">全选</label>
                    <input type="checkbox" :id="item.id" v-model="item.ischeck">
                </td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>

            </tr>
            <tr>
                <td>总计</td>
                <td colspan="3">{{and}}</td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#app',
        // 数据
        data: {
            iceCream: [
                {
                    id: 98,
                    name: '哈根达斯',
                    num: 10,
                    price: 98,
                    ischeck: false
                },
                {
                    id: 56,
                    name: '八喜',
                    num: 1,
                    price: 48,
                    ischeck: true
                },
                {
                    id: 102,
                    name: '冰雪皇后',
                    num: 1,
                    price: 29,
                    ischeck: false
                },
                {
                    id: 106,
                    name: '蒙牛',
                    num: 10,
                    price: 4,
                    ischeck: true
                }
            ]
        },
        // 方法
        methods: {

        },
        // 计算属性
        computed: {
            // 给全选按钮添加了 双向数据绑定 用于计算
            isAll: {
                // 获取访问data 数据的值的时候 调用
                get() {
                    return this.iceCream.every(function (el) {
                        return el.ischeck
                    })
                },
                // 修改data数据的值的时候调用
                set(value) {
                    this.iceCream.forEach(element => {
                        element.ischeck = value;
                    });
                }
            },
            and() {
                // 返回
                // 传入 初始值和结果
                return this.iceCream.reduce(function (cur, val) {
                    // 当每一项的 val.ischeck是true的时候 给他计算 出来
                    if (val.ischeck) {
                        return cur + val.num * val.price;
                    } else {
                        return cur;
                    }
                }, 0)
            }
        }
    })
</script>