How to handle multiple checkboxes with same v-model in vue.js? - vue.js

Question

It will be very helpful for me if anyone shows me about sending and retrieving multiple checkbox value to backend from vue.js. I searched for it through the internet but hardly found anything.
What I need is suppose I have a category and there are many books under that category. In my books table in database there are 20 books and I want to assign 10 books from within 20 books under a certain category from admin panel by using checkboxes in vue.js.
Also I have to retrieve them and show as checked for a certain category. For now I only know that I am going to use an array as v-model and use axios to send them and retrieve them.
`<template>
<div class="container">
<form>
<div class="form-group" v-for="(book, index) in books" :key="index">
<input type="checkbox" v-model="selected_books" id="">
<label for="">{{ book.name }}</label>
</div>
<div class="form-group">
<input type="file" #change="image" id="">
</div>
<button #click="save" type="submit">Save</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
books: [],
selected_books: [],
image: ""
}
},
methods: {
save: function () {
let fd = new FormData();
fd.append("images", this.thumbnail);
axios
.post('/admin/store', fd)
.then((response) => {
console.log(response);
this.success = response.data.message;
});
},
}
}
</script>`
So how should I take those checkboxes in the array selected_books and append them using formdata for the certain category. Besides how to fetch them and show as checked for that book category ?

Answer 1

Set a is_selected type of flag for each individual book for your v-model
<template>
<div class="container">
<form>
<div class="form-group" v-for="(book, index) in books" :key="index">
<input type="checkbox" v-model="book.is_selected" id="">
<label for="">{{ book.name }}</label>
</div>
<div class="form-group">
<input type="file" #change="image" id="">
</div>
<button #click="save" type="submit">Save</button>
</form>
</div>
</template>
Fetch your books in the mounted lifecycle hook using fetch or axios. Use the computed property for the selected_books array to filter all the books and return only the ones that have is_selected set to true.
<script>
export default {
async mounted () {
this.books = await fetch(`https://url.goes.here`, { method: `get` });
},
computed: {
selected_books: function () {
return this.books.filter(book => book.is_selected);
}
},
data() {
return {
books: [],
image: ``
}
},
methods: {
save: function () {
let fd = new FormData();
fd.append(`images`, this.thumbnail);
axios
.post(`/admin/store`, fd)
.then(response => {
console.log(response);
this.success = response.data.message;
});
},
}
}
</script>