How to bind an event to a treeview node in Vuetify?

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

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 2

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 3

<v-treeview
    v-model="tree"
    :items="items"
    :active="active"
    activatable
    open-on-click
    @update:active="test"
    >

methods: {
    test() {console.log('TEST', this.active)},

Answer 4

@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 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)
        }