如何在 Vuetify 中单击菜单项?

Posted

技术标签:

【中文标题】如何在 Vuetify 中单击菜单项?【英文标题】:how to do menu item click in Vuetify? 【发布时间】:2020-04-22 09:03:04 【问题描述】:

我在头像悬停时创建了菜单,还从项目数组中添加了项目。现在点击项目,必须去特定的组件或项目。我试过这个:

模板:

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

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

【问题讨论】:

你有vue-router吗? go specific component or item 是什么意思?可以举个例子吗? “去特定的组件或项目”意味着你可以在图片中看到,如果我点击配置文件,它将转到 profile.vue 或点击注销,它将打开一个注销弹出窗口。我有 index.js,其中写入了路由。 @AliHosseini 所以在你的 item.title 上使用 switch-case 我不明白。你能告诉我@AliHosseini 【参考方案1】:

在您的项目中使用 switch-case,如下所示:

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

而不是console.log()s 使用您的代码例如转到个人资料页面而不是console.log('Profile') 放入$router.push('/profile')

希望对你有帮助

【讨论】:

***.com/questions/61436830/…@Ali Hossen 你能帮帮我吗?【参考方案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>

【讨论】:

以上是关于如何在 Vuetify 中单击菜单项?的主要内容,如果未能解决你的问题,请参考以下文章

如何通过单击 v-list 项 vue + vuetify 来选择 v-radio

如何使附加项在 v-select vuetify 中始终可见

在java中单击菜单项时如何更改形状

在 UWP 中单击汉堡菜单项时如何提高应用程序性能?

单击另一个菜单项时如何切换菜单

右键单击任何菜单项时如何获取 MenuItem 名称?