vue 復選框?qū)崿F(xiàn)全選功能的一個問題

<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: "數(shù)學課程",
                book: [{
                    book_id: 3,
                    name: "一年級數(shù)學課",
                    course_id: 2,
                }, {
                    book_id: 4,
                    name: "二年級數(shù)學課",
                    course_id: 2,
                }, {
                    book_id: 5,
                    name: "三年級數(shù)學課",
                    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>

頁面效果