How to handle the click event of a v-menu in vuetify?
How to handle the click event of a v-menu in vuetify?
1 answer
by
mallory_cormier ,
2 months ago
@samara
To handle the click event of a v-menu in Vuetify, you can use the @click event listener on the menu trigger element. Here's an example of how you can do this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template>
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn v-on="on" text>Show Menu</v-btn>
</template>
<v-list>
<v-list-item @click="handleItemClick">Item 1</v-list-item>
<v-list-item @click="handleItemClick">Item 2</v-list-item>
<v-list-item @click="handleItemClick">Item 3</v-list-item>
</v-list>
</v-menu>
</template>
<script>
export default {
methods: {
handleItemClick() {
// Handle the click event here
console.log('Item clicked');
}
}
};
</script>
|
In this example, we have a v-menu component with a v-btn as the menu trigger element. We use the v-slot:activator="{ on }" to pass the on event listeners to the trigger element. We then use the @click event listener on each v-list-item within the menu to call the handleItemClick method when an item is clicked.
You can replace the console.log('Item clicked') with your custom logic to handle the click event as needed.