I'm currently implementing a data table using Vuetify, but I have stumbled into a problem while trying to react to a click on the "select-all" button in a data table. Right now, when the select-all button is clicked, the currently visible rows are selected (which is exactly what I want). However, I would like to be notified of the user clicking on this select-all button.

My plan is to provide the user with a "select everything" button, once the user clicks this "select-all" checkbox, but I can't seem to find a way (without having to reside to hacks) to get notified of a click on the "select-all" button.

I'm currently implementing a data table using Vuetify, but I have stumbled into a problem while trying to react to a click on the "select-all" button in a data table. Right now, when the select-all button is clicked, the currently visible rows are selected (which is exactly what I want). However, I would like to be notified of the user clicking on this select-all button.

My plan is to provide the user with a "select everything" button, once the user clicks this "select-all" checkbox, but I can't seem to find a way (without having to reside to hacks) to get notified of a click on the "select-all" button.

• javascript
• vue.js
• vuetify.js

• There is no built-in event for this (at least in v1.5.16) so you have to either implement the checkbox yourself and not rely on the select-all attribute or try to watch the v-model of the data-table and detect whether the length of this array is equal to the total number of items in the data-table. – IVO GELOV Commented Aug 13, 2019 at 12:55

2 Answers 2

There is a toggle-select-all method.

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :value="selected"
      @toggle-select-all="selectAll"
      :items-per-page="itemsPerPage"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      class="elevation-1"
    >
    </v-data-table>
    <v-dialog>
      <v-card>
      </v-card>
    </v-dialog>
  </v-app>
</div>

Javascript is below:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    selectAll(event) {
      if (event.status) {
        alert('selected all')
      } else {
        alert('deselected all')
      }
    }
  },
  data () {
    return {
      selected: [],
      itemsPerPage: 10,
      headers: ['headers', 'data'],
      desserts: ['your', 'data']
    }
  }
})

You can do this by using :value and @input on the Vuetify table rather than v-model. Check if the selected array is equal to items per page when the user selects something.

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :value="selected"
      @input="enterSelect($event)"
      :items-per-page="itemsPerPage"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      class="elevation-1"
    >
    </v-data-table>
    <v-dialog>
      <v-card>
      </v-card>
    </v-dialog>
  </v-app>
</div>

Javascript is below:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    enterSelect(values) {
      if (values.length == this.itemsPerPage) {
        alert('selected all')
      }
    }
  },
  data () {
    return {
      selected: [],
      itemsPerPage: 10,
      headers: ['headers', 'data'],
      desserts: ['your', 'data']
    }
  }
})

Working example here: https://codepen.io/CodingDeer/pen/QWLyaog?editors=1010