vue 复选框实现全选功能的一个问题

Question

<template>
    <div class="sdffs">
        <div v-for="course in data" >

            <Checkbox :value="checkAll[course.course_id]" @click.prevent.native="handleCheckAll(course.course_id)">{{ checkAll[course.course_id] }} 全选</Checkbox>

            <span @click="del(course.course_id)">删除</span>

            <div v-for="books in course.book">

                <div>
                    <input type="checkbox" :value="books.book_id" v-model="books_choice"  @click="checkAllGroupChange(books.course_id)"> {{ books.name }}
                </div>
            </div>

        </div>

        <span>Checked names: {{ books_choice }}</span>

    </div>


</template>


<script>
export default {
    data() {

        return {
            books_choice: [],
            checkAll: [],
            data: [{
                course_id: 1,
                name: "语文课程",
                book: [{
                    book_id: 1,
                    name: "一年级语文课",
                    course_id: 1

                }, {
                    book_id: 2,
                    name: "二年级语文课",
                    course_id: 1
                }]
            }, {
                course_id: 2,
                name: "数学课程",
                book: [{
                    book_id: 3,
                    name: "一年级数学课",
                    course_id: 2,
                }, {
                    book_id: 4,
                    name: "二年级数学课",
                    course_id: 2,
                }, {
                    book_id: 5,
                    name: "三年级数学课",
                    course_id: 2,
                }]
            }, {
                course_id: 3,
                name: "英语课程",
                book: [{
                    book_id: 6,
                    name: "一年级英语课",
                    course_id: 3,
                }, {
                    book_id: 7,
                    name: "二年级英语课",
                    course_id: 3,
                }, {
                    book_id: 8,
                    name: "三年级英语课",
                    course_id: 3,
                }]
            }, {
                course_id: 4,
                name: "政治",
                book: [{
                    book_id: 9,
                    name: "高一政治课",
                    course_id: 4
                }]
            }]
        }
    },

    methods: {
        del(course_id) {

            this.data.splice(1, 1);
        },

        //全选
        handleCheckAll(course_id) {

            this.checkAll[course_id] = ! this.checkAll[course_id];

            let book = this.get_book(course_id);

            if(this.checkAll[course_id]) {

                for(let j in book) {

                    if($.inArray(book[j].book_id, this.books_choice) == -1) {

                        this.books_choice.push(book[j].book_id)

                    }
                }
            } else {

                for(let j in book) {

                    let key = $.inArray(book[j].book_id, this.books_choice);

                    if(key != -1) {

                        this.books_choice.splice(key, 1)
                    }
                }
            }

        },

        get_book(courseId) {

            let book = [];

            for(let i = 0; i < this.data.length; i++) {

                if(this.data[i].course_id == courseId) {

                    book = this.data[i].book;

                    break;
                }
            }

            return book;

        },

        checkAllGroupChange(course_id) {

            setTimeout(() => {

                let book = this.get_book(course_id);

                console.log(this.books_choice)
                for(let k in book) {

                    if($.inArray(book[k].book_id, this.books_choice) == -1) {

                        return this.checkAll[course_id] = false;;

                    }
                }

                this.checkAll[course_id] = true;

            })

        }
    }
}
</script>

页面效果

我上面点击了一年级语文课和二年级语文课按照正常逻辑上面全选框会被点亮。但是我需要在点击一次其他的复选框上面才会被选中。但是在checkAllGroupChange方法里 this.checkAll[course_id]已经是true了呀

Answer 1

https://cn.vuejs.org/v2/guide...
对数组的操作不能通过设置下标来操作，这样vue检测不到数组的变化