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

Member

by samara , in category: Javascript , 2 months ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

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.