'Close an expanded row in a Vuetify v-data-table through code

I have a v-data-table that expands to show additional information and am trying to find a way, through code, to close the row before the user refreshes the data. Is there some event I can emit up to get any open rows to close?

vuetify.js

Solution 1:^[1]

You can use expanded.sync to retrieve all the expanded rows in a data table and to close all the rows that have been expanded, just reset the synched variable to an empty array.

<v-data-table
    :headers="headers"
    :items="desserts"
    :expanded.sync="expanded"
    item-key="name"
    show-expand
    class="elevation-1"
  >
</v-data-table>

  data(){
    return {
       ...
       expanded: [] 
    }
  }
  methods: {
    ...
    closeAll(){
       this.expanded = []
    }
  }

Solution 2:^[2]

It doesn't look like the expanded prop existed back in 1.5. If anyone else is looking for that, this seems to work: this.$refs.dataTable._data.expanded = {}; where you have ref="dataTable" on your v-data-table.

That expanded field is an object e.g. { "yourExpandedRowItemId": true } so resetting it collapses any open rows.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Anees Hameed
Solution 2	Zout

'Close an expanded row in a Vuetify v-data-table through code

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]