How to select multiple checkboxes with Vuetify? - checkbox

Question

We've built an app with Vue.js and Firebase where jobs is a node in our db. When we add an event, we want to include the jobs available for that event. On our "Add Event" layout, I've included checkboxes of all the jobs in the DB. We want to be able to select the relevant jobs.
The way it is set up, it works great if you only check one job, but we often need to include 5-10 jobs.
How can I change the code so that I can select multiple jobs at once?
<v-list-tile v-for="(job, index) in jobs" :key="job.title">
<v-list-tile-content>
<v-checkbox
:key="job.title"
:label="job.title"
:value="job.title"
v-model="checkboxes[index].checked">
</v-checkbox>
</v-list-tile-content>
</v-list-tile>
...
export default {
data () {
return {
title: '',
description: '',
startDate: '',
endDate: '',
checkboxes: [],
jobs:[],
...
computed: {
items () {
this.checkboxes = this.jobs.map(job => {
return {
checked:false
}
})
return this.jobs
},
jobs () {
return this.jobs
}
},
... vuex:
created () {
this.jobs = this.$store.getters.loadedJobs
},

Answer 1

Use the index from v-for to keep track of which boxes are checked. Something like the following should get you started:
<v-list-tile v-for="(job, index) in items" :key="job.title">
<v-list-tile-content>
<v-checkbox :value="job.title"
:key="job.title"
:label="job.title"
v-model="checkboxes[index].checked">
</v-checkbox>
</v-list-tile-content>
</v-list-tile>
export default {
data () {
return {
checkboxes: [],
jobs: []
}
},
computed: {
items () {
this.checkboxes = this.jobs.map(job => {
return {
checked: false
}
})
return this.jobs
}
},
created() {
this.$nextTick(() => {
this.jobs = [
{
L9cWVNxnQMfumDkUxxp: {
title: "job 1"
}
},
{
L9cWVNxnQMfumDkUxp: {
title: "job 2"
}
},
{
L9cWVNxnQMfumDkxxp: {
title: "job 3"
}
}]
})
}
}
Working fiddle:
https://jsfiddle.net/6yarqagf/5/