在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中具有骆驼脚本。我不知道您是否引用相同的变量。