<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; iPP) {
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>Page effect
I click on the first-year Chinese class and the second-year Chinese class. According to the normal logic, the full box will be lit up. But I need to click on another check box to be selected. But in the checkAllGroupChange method, this.checkall [course _ id] is already true
.