I have created menu on avatar hover and also added item from item array. Now clicking on the items, have to go specific ponent or item. I tried this:

template:

 <template>
   <div>
       <v-menu offset-y open-on-hover>
              <template v-slot:activator="{ on }">
                 <v-avatar color="white" size="38"  v-on="on">
                    <span class="primary--text headline">A</span>
                 </v-avatar>
              </template>
              <v-list>
                <v-list-item
                  v-for="(item, index) in items"
                  :key="index"
                  @click="selectSection(item)" >

                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

       </div>
 </template>

Script:

 <script>
   export default {
     data: () => ({
       items: [
         { title: '[email protected]' },
         { title: 'Profile' },
         { title: 'Logout' },
         ],
      }),

     methods: {
      selectSection(item) {
       this.selectedSection = item;
      }  
    }
   </script> 

I have created menu on avatar hover and also added item from item array. Now clicking on the items, have to go specific ponent or item. I tried this:

template:

 <template>
   <div>
       <v-menu offset-y open-on-hover>
              <template v-slot:activator="{ on }">
                 <v-avatar color="white" size="38"  v-on="on">
                    <span class="primary--text headline">A</span>
                 </v-avatar>
              </template>
              <v-list>
                <v-list-item
                  v-for="(item, index) in items"
                  :key="index"
                  @click="selectSection(item)" >

                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

       </div>
 </template>

Script:

 <script>
   export default {
     data: () => ({
       items: [
         { title: '[email protected]' },
         { title: 'Profile' },
         { title: 'Logout' },
         ],
      }),

     methods: {
      selectSection(item) {
       this.selectedSection = item;
      }  
    }
   </script> 

• javascript
• menu
• vue-ponent
• vuetify.js
• menuitem-selection

• did you have vue-router? and what do you mean by go specific ponent or item? can you give me a example? – Ali Hosseini Commented Apr 22, 2020 at 9:16
• "go specific ponent or item" means as u can see in picture, if i click on profile it will goto profile.vue or click on logout it will open a popup for logout. I have index.js in which routing is wriiten. @AliHosseini – TB13 Commented Apr 22, 2020 at 10:09
• so use switch-case in on your item.title – Ali Hosseini Commented Apr 22, 2020 at 12:09
• i did not understand. can u please show me @AliHosseini – TB13 Commented Apr 24, 2020 at 12:25

2 Answers 2

If you want to keep your click logic together with your item data, you could do it like this. The reason I'm using call is that we have access to this (so that we can still access the Vue instance & Vuex store etc):

Template:

<template>
  <v-menu bottom left>
    <template v-slot:activator="{ on, attrs }">
      <v-btn
        v-bind="attrs"
        v-on="on"
        color="primary"
        icon
      >
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </template>

    <v-list>
      <v-list-item
        v-for="(item, index) in items"
        :key="index"
        @click="handleClick(index)"
      >
        <v-list-item-icon>
          <v-icon v-text="item.icon"></v-icon>
        </v-list-item-icon>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

Script:

<script>
export default {
  data: () => ({
    items: [
      { 
        title: 'Edit', 
        icon: 'mdi-pencil',
        click() {
          console.log('edit')
        }
      },
      { 
        title: 'Due Date',
        icon: 'mdi-calendar',
        click() {
          console.log('due date')
        }
      },
      { 
        title: 'Delete',
        icon: 'mdi-delete',
        click() {
          this.$store.dispatch('deleteTask', 1)
        }
      }
    ]
  }),
  methods: {
    handleClick(index) {
      this.items[index].click.call(this)
    }
  }
}
</script>

use switch-case in your items like this:

selectSection(item) {
      switch (item.title) {
        case '[email protected]':
          console.log('email')
          break
        case 'Profile':
          console.log('Profile')
          break
        case 'Logout':
          console.log('Logout')
      }
    }

and instead of console.log()s use your code for example to go to profile page instead of console.log('Profile') put $router.push('/profile')

hope it helps you