如何在 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