Search code examples
vuejs3vuetifyjs3

Attach a listener to the expand button on a v-data-table in Vuetify3

In my Vue 3 app, there's a table where each row will display details about an entity. However, these details need to be fetched from the server. Before expanding the table, I'd like to fetch these details. Is there a way to achieve this?

<v-data-table density="compact" :items="state.items" show-expand>
      <template v-slot:expanded-row="{ columns, item }">...</template>
</v-data-table>

So I would like to attach a listener on that button but also keep the functionality of expanding the details panel.

enter image description here

Solution

  • You can use the update:expanded event for this. It receives an array containing the value for the expanded rows (as identified through the item-value prop).

    With this, you can load the missing details and show a spinner in the meantime.

    Here is an example playground.