All menus open on-click for list item in vuetify v-for

Question

I have a list of items in vuetify, and I would like them each to have a menu open on click. At the moment I have the menus open correctly, but it opens the menus for all items at once when any item is selected, instead of each one individually when clicked. What am I doing wrong here?

    <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;
    },

you need to move v-for items to it's own component and maintain reactive properties over there. If this did not help then ping me on skype: syed_haroon — Syed

Jose Fernández Jose Fernández · Accepted Answer · 2020-09-16T07:04:09

I miss some code to fully understand it, anyway I think your issue is that you are checking the same variable for all the items, then they all are always true/false.

I think to fix this issue you can create a child component for the item, with its own is_visible variable, and when this child component is clicked, you can turn it into true and open its menu. I think you are doing something with the item after clicked it, so you could also emit an event to the parent with the item itself.

PD: you have menu_item in the data as snake_case but as camelcase in the methods menuItem. I don't know if you refer to the same variable.

All menus open on-click for list item in vuetify v-for

1 Answers