How to bind an event to a treeview node in Vuetify? - vue.js

Question

I am currently making a treeview using Vuetify. What I am trying to do is that I want to bind an event whenever I click on a node. For example when I click on a certain node a dialog box will pop out to show the node's details. I want to know how to fire off an event on click.

Answer 1

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>

Answer 2

<v-treeview
v-model="tree"
:items="items"
:active="active"
activatable
open-on-click
#update:active="test"
>
methods: {
test() {console.log('TEST', this.active)},

Answer 3

#anthonio-achiduzu , At least for Vuetify version 2.3.3, the #update:active is triggered before the this.active being changed , so the test() will output a empty array in the above code.

Answer 4

You've two events :
The first one is update:open that's fired when you click on a node that has child nodes and its handler has the opened node as parameter :
#update:open="openNode"
in methods :
methods:{
openNode(node){
//
}
}
The second one is update:active that's fired when you click on a leaf that doesn't child nodes and its handler has the clicked node as parameter :
#update:active="clickOnNode"
in methods :
methods:{
clickOnNode(node){
//
}
}
To get the node with its fields you should add the prop return-object :
<treeview return-object #update:active="clickOnNode" ...

Answer 5

With Vuetify 2.3.5, I use this and it's ok
<v-treeview return-object item-key="id" hoverable activatable selected-color="red"
#update:active="updateForm" color="warning" :items="categories">
</v-treeview>
<template slot-scope="{ item }">
<a #click="updateForm(item)">{{ item.name }}</a>
</template>
In methods, i write funtion updateForm (but this is console to test value):
updateForm(item)
{
if(item.length>0)
console.log(item[0].name)
}