how to do menu item click in Vuetify?

Question

I have created menu on avatar hover and also added item from item array. Now clicking on the items, have to go specific component 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> 

Answer 1

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

Answer 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>