我已经在头像悬停时创建了菜单,并且还从项目数组中添加了项目。现在单击项目,必须转到特定组件或项目。我试过这个:
模板:
<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>
最佳答案
如果您想将点击逻辑与项目数据保持在一起,您可以这样做。我使用 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>
关于javascript - 如何在 Vuetify 中单击菜单项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61361204/