In Vuetify datatables, how do I access the selected sort parameters?

Question

I'm building an export tool for a Vuetify datatable, and I need to pass to the generator the columns that the datatable is currently sorted by, in order, with direction. I figure there's probably a variable I can access for that information, but I can't seem to find it. Maybe I'll have to overwrite the sort function to set such a thing? If so, what would that look like?

Answer 1

The solution I went with was to create two arrays to handle those two qualities, and update them with the event returned with update:sort-by and update:sort-desc, and simply access those.

<v-data-table
    :items="items"
    :headers="headers"
    :sort-by="sortBy"
    :sort-desc="sortDesc"
    multi-sort
    @update:sort-by="updateSort('by', $event)"
    @update:sort-desc="updateSort('desc', $event)"
></v-data-table>

export default {
    data () {
        return {
            sortBy: ['field1', 'field2'],
            sortDesc: [false, false],
        }
    },
    methods: {
        updateSort(byDesc, event){
            if(byDesc == 'by'){
                this.sortBy = event
            }else if(byDesc == 'desc'){
                this.sortDesc = event
            }
        },
        someOtherMethod(){
            console.log(this.sortBy);
            console.log(this.sortDesc);
        }
    }
}

Answer 2

Hey you can use the handler @current-items

like this:

<v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="5"
    :search="search"
    dark
    @current-items="current"
    class="elevation-1"
  ></v-data-table>


<script>
     methods: {
    current(e) {
      // eslint-disable-next-line no-console
      console.log(e);
    },
</script>