How to handle the click event of a v-menu in vuetify?

Member

by samara , in category: Javascript , 9 months ago

How to handle the click event of a v-menu in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by mallory_cormier , 9 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.

Related Threads:

How to do menu item click in vuetify?
How to add a click event on vuetify headers?
How to create menu with sub-menu with vuetify?
How to create scrollable v-list in vuetify?
How to add image to v-card in vuetify?
How to change vuetify v-icon color in css?