How to bind an event to a treeview node in Vuetify?
<v-treeview
v-model="tree"
:items="items"
:active="active"
activatable
open-on-click
@update:active="test"
>
methods: {
test() {console.log('TEST', this.active)},
Vuetify's Treeview component provides a scoped slot label that you can use to change the content displayed for each node. For example, to open a dialog box, you could do something like this:
<v-treeview
v-model="tree"
:items="items"
activatable
item-key="name">
<template slot="label" slot-scope="{ item }">
<a @click="openDialog(item)">{{ item.name }}</a>
</template>
</v-treeview>
You can then use a dialog component and open it/change its contents using a openDialog method
Update 2022-04-01 the slot="label" slot-scope
is deprecated. Here is an updated version:
<v-treeview
v-model="tree"
:items="items"
activatable
item-key="name">
<template v-slot:label="{ item }">
<a @click="openDialog(item)">{{ item.name }}</a>
</template>
</v-treeview>