How to select multiple checkboxes with Vuetify?

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
},

Brian Lee · Answer 1 · 2018-04-11T03:31:49.627

2

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/

edited Apr 11 '18 at 03:31

answered Apr 10 '18 at 19:34

Brian Lee

17,904
3
41
52

Thanks... this gives a console error: "Cannot read property 'checked' of undefined" – Greg Fielding Apr 10 '18 at 21:36
Move `this.checkboxes = Array.fill({checked: false}, this.jobs.length)` to the `created()` hook instead – Brian Lee Apr 10 '18 at 22:47
Same issue... TypeError: Cannot read property 'checked' of undefined – Greg Fielding Apr 10 '18 at 23:23
Okay that's a big help, but I still can't get it working by loading data from the Vuex store. I've updated the code with my mashup of the fiddle and vuex – Greg Fielding Apr 11 '18 at 20:37

How to select multiple checkboxes with Vuetify?

1 Answers1