title: How to properly check all checkboxes and change states with Vue?
body: <p>Been searching for a while for this issue, now I work to select all checkboxes:</p>
  
  <p>1.- When the checkbox labeled as "Seleccionar Todos" is checked, must check all current checkboxes.</p>
  
  <p>2.- If the checkbox "Seleccionar todos" is checked but user unchecks any checkbox aside of "Seleccionar todos", it must deactivate select all checkbx</p>
  
  <p><strong>Tickets.vue</strong> (This file creates the table I need, here is where I need help)</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-card class="elevation-5 pa-3"&gt;
      &lt;div&gt;
      &lt;v-checkbox color="primary" @change="selectall()" :id="`todos`" :label="`Seleccionar Todo`" :checked="booleanValue" :val="'FALSE'" ref="todos"/&gt;
      &lt;/div&gt;
      &lt;v-data-table
          ref="data_table"
          :headers="configuracion.configClientes.encabezados"
          expand
          rows-per-page-text="Filas por página"
          :rows-per-page-items="[10, 20, 55, { text: 'Todas', value: -1 }]"
          :no-results-text="'No se han encontrado tickets'"
          :item-key="configuracion.configClientes.itemKey"
          v-model="seleccion"
          :configuracion="configuracion.configClientes"
          :items="cat_clientes.catalogo"
      &gt;
        &lt;template slot="headerCell" slot-scope="props"&gt;
            &lt;span&gt;
              {{ props.header.text }}
            &lt;/span&gt;
        &lt;/template&gt;
  
        &lt;template slot="items" slot-scope="props"&gt;
          &lt;tr&gt;
            &lt;td
                v-for="columna in configuracion.configClientes.encabezados"
                v-if="columna.value !== '$acciones'"
                :key="keyUUID()"
            &gt;
              {{ formatearColumna( props.item, columna ) }}
  
            &lt;/td&gt;
            &lt;td&gt; 
              &lt;v-checkbox :val="items.FOLIO" v-model="props.items" color="primary" @change="changeCheckbox(props.item.FOLIO)"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/template&gt;
  
        &lt;template slot="no-data"&gt;
          &lt;v-alert :value="true" color="warning" icon="warning"&gt;
            {{ configuracion.mensajeVacia ? configuracion.mensajeVacia : 'No hay tickets' }}
          &lt;/v-alert&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import { mapActions, mapGetters } from 'vuex';
    /* mixins */
    import { mixins_generales } from "../Mixins/generales";
    import { formatos } from "../Mixins/formatos";
  
    export default {
      mixins: [mixins_generales, formatos],
  
      props: {
        configuracion: {
          type: Object,
          default: () =&gt; {
            return {
          configClientes: {
            seleccionable: true,
            itemKey: 'id',
            editable: true,
            eliminable: true,
            buscable: true,
            expandible: true,
            labelBusqueda: 'Buscar ticket',
            mensajeVacia: 'No hay tickets',
            encabezados: [
              {text: 'Folio', value: 'FOLIO', align: 'left'},
              {text: 'Fecha', value: 'FECHA', align: 'left'},
              {text: 'Hora', value: 'HORA', align: 'left'},
              {text: 'Sub-Total', value: 'SUBTOTAL', align: 'left'},
              {text: 'IVA', value: 'IVA', align: 'left'},
              {text: 'Total', value: 'TOTAL', align: 'left'},
              {text: 'Procesar', value: '$acciones', align: 'left'}
            ]
          },
          clienteSeleccionado: null,
        };
          }
        },
        items: {
          type: Array,
          default: () =&gt; []
        }
      },
  
      data() {
  
        return {
            checked:false,
          seleccion: [],
          todos:[],
          booleanValue:false
        };
      },
      computed: {
        ...mapGetters([
          'cat_clientes'
        ]),
      },
      methods: {
                ...mapActions([
          'LLENAR_CAT_CLIENTES',
          'AGREGAR_CAT_CLIENTE',
          'QUITAR_CAT_CLIENTE',
          'MARCAR_CAT_CLIENTES_CONSULTADO'
        ]),
            handleInput(e) {
        console.log("handleInput in App :: ", e);
        this.formattedValue = e;
      },
        onClick(props) {
          if (this.configuracion.expandible) {
            props.expanded = !props.expanded;
          }
        },
  
        onEditar(item) {
          this.$emit('editar', item);
        },
  
        onEliminar(item) {
          this.$emit("eliminar", item);
        },
  
        formatearColumna(item, encabezado) {
          if (item[encabezado.value]) {
            if (encabezado.formato) {
              if (encabezado.formato === 'moneda') {
                return this.formatearMoneda(item[encabezado.value]);
              }
            }
  
            return item[encabezado.value];
          }
          return 'N/A';
        },
  
        override_genPagination() {
          const that = this.$refs.data_table;
          that.genPagination = () =&gt; {
            let pagination = '–';
  
            if (that.itemsLength) {
              const stop = that.itemsLength &lt; that.pageStop || that.pageStop &lt; 0
                ? that.itemsLength
                : that.pageStop;
  
              pagination = that.$scopedSlots.pageText
                ? that.$scopedSlots.pageText({
                  pageStart: that.pageStart + 1,
                  pageStop: stop,
                  itemsLength: that.itemsLength
                })
                : `${that.pageStart + 1}-${stop} de ${that.itemsLength}`;
            }
  
            return that.$createElement('div', {
              'class': 'datatable__actions__pagination'
            }, [pagination]);
          }
        },
              cargar() {
          this.MOSTRAR_LOADING('Obteniendo tickets');
          const url = this.g_url + '/php/catalogos/obtenertickets.php';
  
          this.$http.get(url)
            .then(response =&gt; {
              const respuesta = response.data;
              console.log('[Tickets](cargar)', response);
  
              if (!this.RespuestaSinErrores(respuesta, 'Ha ocurrido un error en el servidor al obtener los tickets')) {
                return;
              }
  
              // actualizar el state con el catálogo y mostrar al usuario
              this.MOSTRAR_SNACKBAR({texto: 'Tickets cargados', color: 'success', arriba: true, derecha: true});
              this.LLENAR_CAT_CLIENTES(respuesta.conceptos.catalogo);
              this.todos = respuesta.todos;
              this.MARCAR_CAT_CLIENTES_CONSULTADO();
            }, error =&gt; {
              this.MostrarErrorConexion(error);
            });
        },
   changeCheckbox(item)
   {
     let aux = 0;
     this.booleanValue = false;
  
     if(this.seleccion.length == 0)
     {
       //Array Vacio
       this.seleccion.push(item);
     }else{
       for(var i=0;i &lt; this.seleccion.length;i++)
       {
         if(this.seleccion[i] == item)
         {
           //Existe en array
           this.seleccion.splice(this.seleccion.indexOf(item), 1);
           aux = 1;
           break;
         }
       }
       if(aux==0)
       {
         this.seleccion.push(item);
       }
     }
     console.log(this.seleccion);
   },
   toggleAll() {
    this.items.forEach((props, items) =&gt; {
      this.$set(this.props.items, "value", !this.selectDeselectAll);
    });
  },
   toFol()
   {
     let istodos = document.getElementById("todos").checked;
     let fol = "";
     if(this.seleccion.length == 0 &amp;&amp; istodos == false)
      {
        this.MOSTRAR_SNACKBAR({texto: 'No ha elegido tickets para facturar', color: 'error'});
        return false;
      }
  
      if(istodos == true)
      {
        return this.todos;
      }else{
        return this.seleccion;
      }
   }
      },//Fin metodos
  
      mounted() {
        this.override_genPagination();
      },
            created() {
        if (!this.cat_clientes.consultado) {
          this.cargar();
        }
      },
      watch: {
        seleccion(valor) {
          this.$emit('seleccion', valor);
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am taking as example this url <a href="https://makitweb.com/check-uncheck-all-checkboxes-with-vue-js/" rel="nofollow noreferrer">https://makitweb.com/check-uncheck-all-checkboxes-with-vue-js/</a> &amp; @Robin ZecKa Ferrari answer with no luck (Since his example is quite different to my code needs but its a help)</p>
  
  <p><strong>EDIT:</strong> Current approach uses Robin ZecKa Ferrari answer but it only ticks Seleccionar todos but not ALL checkboxes</p>