How to bind an event to a treeview node in vuetify?
How to bind an event to a treeview node in vuetify?
1 answer
by
gilbert ,
2 months ago
@denis
To bind an event to a treeview node in Vuetify, you can use the @click directive on the v-treeview component to handle the click event. Here's an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template>
<v-treeview
:items="items"
@click="handleNodeClick"
></v-treeview>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
name: 'Node 1',
children: [
{
id: 2,
name: 'Child Node 1'
},
{
id: 3,
name: 'Child Node 2'
}
]
}
]
};
},
methods: {
handleNodeClick(node) {
console.log('Node clicked:', node);
}
}
};
</script>
|
In this example, we have a v-treeview component with a list of items representing the nodes in the treeview. We bind the @click event to the handleNodeClick method, which will be called when a node is clicked. The method takes the clicked node as a parameter, which allows you to access the information about the node that was clicked.