vuetify v-for 中的所有菜单都在单击时打开列表项答案

【问题标题】：All menus open on-click for list item in vuetify v-forvuetify v-for 中的所有菜单都在单击时打开列表项
【发布时间】：2020-09-15 18:55:29
【问题描述】：

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

【问题讨论】：

您需要将 v-for 项目移动到它自己的组件并在那里保持反应性属性。如果这没有帮助，那么在 Skype 上 ping 我：syed_haroon

标签： javascript vue.js vuetify.js

【解决方案1】：

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

我认为要解决此问题，您可以为该项目创建一个子组件，使用其自己的is_visible 变量，当单击此子组件时，您可以将其变为 true 并打开其菜单。我认为您在单击该项目后正在对其进行操作，因此您还可以使用该项目本身向父级发出事件。

PD：您在数据中有menu_item 作为snake_case，但在方法menuItem 中作为camelcase。不知道你指的是不是同一个变量。

【讨论】：