How to check all checkbox on checking one checkbox in vuetify?

Question

I have created 5 checkboxes dynamically through for loop

<v-checkbox 
    v-model="selectAll"
    label="Select All"
    @change="select_All($event)"
></v-checkbox>

<template v-for="n in 5">
    <v-checkbox 
       v-model="selected[n]"
    ></v-checkbox>
</template>

In script

data(){
    return{
        selected:[],
                selectAll: false
    }
},
methods:{
    select_All(e){
        if(e == true)
        {
            // check all the checkbox
        } else {
            // uncheck all the checkbox
        }
    }
}

This is how I have created checkboxes dynamically,(if you have any better suggestion for how to create dynamic checkbox please tell me) Now I have a checkbox above all and if I click(check) on that checkbox all the below checkbox should be selected or vice-versa.

Answer 1

I use it like this for select/deselect multiple dynamically generated checkboxes:

    <v-checkbox v-model="selected" @click.native.stop="selectAll()" />
    <v-checkbox v-model="checkbox[0]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[1]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[2]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[3]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[4]" class="checkbox" @click.native.stop />

Checkboxes above can be dynamically generated. I use (not this case) v-for cycle code block with API id's as index.

new Vue({
  el: '#app',
  data: {
    checkbox: {},
    selected: false
  },
  mounted () {
    /* this is just example, in this case you could type number properties 
    directly in data.checkbox like checkbox[0] = false etc., but in a real case 
    you may want to use string ID or any API based index with it's corresponding 
    v-for html markdown */
    for (let i = 0; i < 5; i++) {
      // maintaining reactivity
      this.$set(this.checkbox, i, false)
    }
  },
  methods: {
    selectAll () {
      for (const i in this.checkbox) {
        this.checkbox[i] = this.selected
      }
    }
  }

})

You can probably replace mounted block for this if you want:

watch: {
  checkbox: {
    immediate: true,
    handler () {
      for (let i = 0; i < 5; i++) {
        // maintaining reactivity
        this.$set(this.checkbox, i, false)
      }
    }
  }
}

Answer 2

Here is an example of using computed for this case:

new Vue({
  el: '#app',
  data: {
    selected: [],
    count: 5
  },
  computed: {
    selectedAll: {
      set(val) {
        this.selected = []
        if (val) {
          for(let i = 1; i <= this.count; i++) {
            this.selected.push(i)
          }
        }
      },
      get() {
        return this.selected.length === this.count
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <label>
   <input type="checkbox" v-model="selectedAll" />
   Select all
 </label>
  <ul>
    <li v-for="n in count">
      <label>
        <input type="checkbox" v-model="selected" :value="n" />
        C {{ n }}
      </label> 
    </li>
  </ul>
</div>

But I haven't tested it by vuetify.

Answer 3

You can loop through the selected array to make all the indexes to true But in the very first time, you have to get the length of checkboxes from some other source instead of selected array.(I'm using refs to count checkboxes here)

the code would be something like below

<v-checkbox 
  ref="n"
  v-model="selected[n]"
></v-checkbox>


select_All(e){
        if(e == true)
        {
          this.$refs.n.forEach((val, index) => this.selected[index] = true)
        } else {
            this.$refs.n.forEach((val, index) => this.selected[index] = false)
        }
    }