как сделать щелчок по пункту меню в Vuetify?

Question

Я создал меню при наведении аватара, а также добавил элемент из массива элементов. Теперь, щелкая по элементам, нужно перейти к определенному компоненту или элементу. Я пробовал это:

шаблон:

 <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>
   export default {
     data: () => ({
       items: [
         { title: '[e-mail]' },
         { title: 'Profile' },
         { title: 'Logout' },
         ],
      }),

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

Answer 1

Используйте switch-case в своих элементах следующим образом:

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

и вместо console.log()s используйте ваш код, например, чтобы перейти на страницу профиля вместо console.log('Profile') ставить $router.push('/profile')

надеюсь, это поможет тебе

Answer 2

Если вы хотите сохранить логику кликов вместе с данными об элементе, вы можете сделать это следующим образом. Причина, по которой я использую call это то, что у нас есть доступ к this (чтобы мы могли получить доступ к экземпляру Vue и хранилищу Vuex и т. д.):

Шаблон:

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