CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Tom
Tom

Reputation: 1468

Vuetify v-treeview get node that was last clicked on

What is the easiest way to retrieve the (id of the) node that was just clicked on in a <v-treeview>? There is the update:open event that emits an array of all open nodes. I could temporarily store the whole array and compare a new version with the old one to see which element was added or removed. But this seems to be a bit cumbersome, right? I want to use the id of the node to dynamically reload the children of the children of the node from the backend, so that the user has the feeling that the data is already in the frontend. Maybe it is possible to emit in the update:open event not the whole array, but only the current node, somehow like this: @update:open="onExpand(item)"? (This throws the error Property or method "item" is not defined.)

Upvotes: 0

Views: 1585

Answers (2)

thadaBoy
thadaBoy

Reputation: 425

You can use update:active with the return-object prop. It will return the full object instead of the node id.

https://vuetifyjs.com/en/api/v-treeview/#props

Upvotes: 0

tony19
tony19

Reputation: 138466

You could use VTreeView's label slot, which passes the item itself in its slot props. In that slot, you could render a span with a click handler that also includes the item:

<template>
  <v-treeview :items="items">
    <template #label="{ item }">
      <span @click="onItemClick(item)">{{item.name}}</span>
    </template>
  </v-treeview>
</template>

<script>
export default {
  methods: {
    onItemClick(item) {
      console.log(item.id)
    }
  }
}
</script>

Upvotes: 1

Related Questions