点击vuetify v-for中的列表项打开所有菜单

Question

我在vuetify中有一个项目列表，我希望每个项目在单击时都有一个打开的菜单。目前，我已经正确打开了菜单，但当选择任何项目时，它会同时打开所有项目的菜单，而不是在单击时单独打开每个项目。我在这里做错了什么？

<v-list-item-group>
<RecycleScroller
v-if="drive_stop_info.drive_stop_list.length > 0"
v-slot="{ item }"
class="scroller"
:items="history_list"
:item-size="50"
key-field="_index"
>
<v-list-item
class="py-0 px-2"
dense
flat
selectable>
<v-menu
v-model = "zone_list_visible"
no-ripple
:close-on-content-click="true"
>
<template v-slot:activator="{ on, attrs }">
<v-avatar
@click="zoneListVisible(item)"
v-if="getZoneArray(item).length>2"
v-bind="attrs"
v-on="on"
color="grey lighten-2"
size="30"
class="grey--text">
+{{getZoneArray(item).length-2}}
</v-avatar>
</template>
<v-list dense>
<v-list-item
v-for="(zone, i) in getZoneArray(item)"
:key="i"
@click="panMapToZone(zone.zone_id)"
>
<v-chip :color="zone.detail.hex_color"> {{ zone.display_name }}</v-chip>
</v-list-item>
</v-list>
</v-menu>
</v-list-item>
</RecycleScroller>
</v-list-item-group>

数据：

data() {
return {
zone_list_visible: false,
menu_item: undefined,
},

方法：

zoneListVisible(item){
this.zone_list_visible = true;
this.menuItem = item;
},

Answer 1

我错过了一些代码来完全理解它，无论如何，我认为你的问题是，你为所有项目检查了同一个变量，然后它们总是true/false。

我认为要解决这个问题，可以为该项创建一个子组件，该组件具有自己的is_visible变量，当单击该子组件时，可以将其转换为true并打开其菜单。我认为您在单击该项后对其进行了处理，因此您还可以将事件发送给具有该项本身的父项。

PD：数据中有menu_item作为snake_case，但方法menuItem中有camelcase。我不知道你是否引用了同一个变量。