How to do menu item click in vuetify?

by dalton_moen , in category: Javascript , 2 months ago

How to do menu item click in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by orpha , 2 months ago

@dalton_moen 

In Vuetify, you can use the @click event handler to trigger a method when a menu item is clicked. Here's an example of how to do a menu item click in Vuetify:

  1. First, set up your HTML template with a v-menu component containing the menu items:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <v-menu offset-y>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" color="primary" dark>
        Menu
      </v-btn>
    </template>
    <v-list>
      <v-list-item @click="handleItemClick('item 1')">Item 1</v-list-item>
      <v-list-item @click="handleItemClick('item 2')">Item 2</v-list-item>
    </v-list>
  </v-menu>
</template>


  1. Then, define the handleItemClick method in your script section:
1
2
3
4
5
6
7
8
export default {
  methods: {
    handleItemClick(item) {
      console.log(item + ' clicked');
      // do something when a menu item is clicked
    },
  },
};


In this example, when a menu item is clicked, the handleItemClick method is called with the item as an argument. You can then perform any desired action within that method.


Make sure to adjust the code according to your specific needs and styling preferences.