How can I make each item in my Vuetify list open a menu individually on click, instead of opening all menus at once when any item is selected?
<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:
data() {
return {
zone_list_visible: false,
menu_item: undefined,
},
in methods:
zoneListVisible(item){
this.zone_list_visible = true;
this.menuItem = item;
},