2

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: 'abcd.xyz@example.com' },
         { title: 'Profile' },
         { title: 'Logout' },
         ],
      }),

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

enter image description here

TB13
  • 367
  • 13
  • 23
  • did you have `vue-router`? and what do you mean by `go specific component or item`? can you give me a example? – Ali Hosseini Apr 22 '20 at 09:16
  • "go specific component 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 Apr 22 '20 at 10:09
  • so use switch-case in on your item.title – Ali Hosseini Apr 22 '20 at 12:09
  • i did not understand. can u please show me @AliHosseini – TB13 Apr 24 '20 at 12:25

2 Answers2

4

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>
Danny Connell
  • 782
  • 1
  • 8
  • 18
3

use switch-case in your items like this:

selectSection(item) {
      switch (item.title) {
        case 'abcd.xyz@example.com':
          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

Ali Hosseini
  • 879
  • 6
  • 13
  • https://stackoverflow.com/questions/61436830/which-life-cycle-method-is-called-during-page-refreshshiftf5-in-vuejs @Ali Hossen Can you help me? – TB13 Apr 26 '20 at 06:57