Skip to content

Instantly share code, notes, and snippets.

@pste
Created September 6, 2019 08:04
Show Gist options
  • Save pste/d974a9ebce4dcc46575bb763966c40d6 to your computer and use it in GitHub Desktop.
Save pste/d974a9ebce4dcc46575bb763966c40d6 to your computer and use it in GitHub Desktop.
Vuetify 1.5.x expandable datatable (by an external button)
<v-btn @click="explodeAll">{{exploded}}</v-btn>
<v-data-table
:headers="headers"
:items="items"
item-key="name"
ref="itemsTable"
expand
>
(..)
<template slot="expand" slot-scope="props">
<v-card flat>
<v-card-text>Peek-a-boo!</v-card-text>
</v-card>
</template>
(..)
data () {
return {
exploded: false,
items: [..],
headers: [..],
}
},
methods: {
explodeAll() {
this.exploded = !this.exploded
for (let i = 0; i < this.items.length; i += 1) {
const item = this.items[i];
this.$set(this.$refs.itemsTable.expanded, item.name, this.exploded);
}
}
},
(..)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment