The problem of multiple selection and inverse selection in Vue

topic description

complete the shopping cart, select the corresponding items and cancel the function

sources of topics and their own ideas

"Vue.js practice" Chapter 5

related codes

/ / Please paste the code text below (do not replace the code with pictures)

<!DOCTYPE html>
<html lang="cmn-hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <!--PC   360webkit -->
    <meta name="renderer" content="webkit">
    <!--  for PC -->
    <link rel="stylesheet" type="text/css"  href="css.css">
    <title></title>
</head>

<body>
    <div>
        
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>

    </div>
    <hr>
    <!--  -->
    <div id="app" v-cloak>
        <template v-if="goods.length">
            <table>
                <thead>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
         <td> | <input type="checkbox" @click="selectAll" id="selectAll" :checked="isCheckedAll"></td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="good,index in goods">
                        <td>{{index+1}}</td>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <!--  -->
                        <td>
                            <button @click="reduce(index)" :disabled="good.count === 1">-</button>
                            {{good.count}}
                            <button @click="add(index)">+</button>
                        </td>
                        <!--  -->
                        <td>
                            <button @click="remove(index)"></button>
                        </td>
                        <td>
             <input type="checkbox" @click="select(index,$event)" class="select">
                        </td>
                    </tr>
                </tbody>
            </table>
            <div> :{{totalPrice}}

                    : {{selectPrice}}

            </div>
        </template>
        <div v-else></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="trolley.js"></script>
</body>

</html>

css.css:

table {
    border: 1px solid -sharpccc;
}

thead {
    background-color: -sharpddd;
}

td {
    border: 1px solid -sharpccc;
}

trolley.js:

var app = new Vue({
    el: "-sharpapp",
    data: {
        //
        goods: [
            { id: 1, name: "iphone 7", price: 6188, count: 1 },
            { id: 2, name: "ipad Pro", price: 5888, count: 1 },
            { id: 3, name: "MacBook Pro", price: 21488, count: 1 }
        ],
        selectPrice: 0,
        isCheckedAll: false ,//
        isChecked:false
    },
    computed: {
        totalPrice: function() {
            var total = 0;
            for (var i = 0; i < this.goods.length; iPP) {
                total += this.goods[i].price * this.goods[i].count;
            }
            return total;
        }
    },
    methods: {
        reduce: function(index) {
            // reduce 
            if (this.goods[index].count === 1) return;
            this.goods[index].count--;
        },
        add: function(index) {
            this.goods[index].countPP;
        },
        remove: function(index) {
            //
            this.goods.splice(index, 1);
        },
        selectAll: function() {
            if (this.isCheckedAll) {

                for (let i = 0; i < this.goods.length; iPP) {
                    document.querySelectorAll(".select")[i].checked = false;
                }
            } else {

                for (let i = 0; i < this.goods.length; iPP) {
                    document.querySelectorAll(".select")[i].checked = true;
                }
            }
            this.isCheckedAll = !this.isCheckedAll;
        },
        select: function(index, event) {

            if (document.querySelectorAll(".select")[index].checked) {
                document.querySelectorAll(".select")[index].checked = true;

                //






            } else {
                document.querySelectorAll(".select")[index].checked = false;


                      //

            }
        }
    },
});

what result do you expect? What is the error message actually seen?

at present, the functions of single selection and all selection have been completed, but in fact, in the course of operation, after selecting all buttons one by one, and deselecting them one by one, the full selection button will also be unchecked at last, which is not completed.
I think the idea should be to cycle through whether all checkbox is selected / unchecked every time you select / unselect, and then set the status of the select all button. But I don"t know how to write it.

Vue.js

Mar.25,2021