javascript - 如何在我的 VueJS/Vuetify 组件中打开和关闭多个 v-menus？

Question

我用 v-menu 创建了多个弹出菜单；我表中的每一行都有一个。当我单击提交时，我需要一种关闭菜单的方法。我不能使用 v-model="menu"并将菜单设置为 false 或 true 来隐藏或显示菜单，因为当我将其设置为 true 时，每个菜单都会打开!有谁知道不使用 v-model 关闭菜单的另一种方法？我找到了一种使用激活器插槽打开它的方法。也许还有一个激活器插槽可以关闭组件？

<template v-slot:item.hours="{ item }">
        <v-menu
          :nudge-width="200"
          :close-on-content-click="false"
          offset-x
        >
          <template v-slot:activator="{ on }">
            <v-chip
              color="blue"
              dark
              v-on="on"
            >
              {{ parseFloat(item.hours).toFixed(1) }}
            </v-chip>
          </template>
          <v-form @submit.prevent="handleSubmitMenu(item)">
            <v-card class="px-5">
              <v-text-field
                label="Edit Hours"
                :value="item.hours"
                @input="updateHours"
              ></v-text-field>
              <v-card-actions>
                <SubmitButton />
              </v-card-actions>
            </v-card>
          </v-form>
        </v-menu>
      </template>

handleSubmitMenu(timeEntry) {
      const hours = this.hours
      this.menu = false
    },

Answer 1

只需为每一行添加 v-model 。

<v-menu v-model="item.menu">

编辑 你也可以使用 $refs 将它添加到 v-menu 并调用 save() 来关闭它。

  <v-menu ref="menu" top offset-y :close-on-content-click="false">
    <template v-slot:activator="{ on }">
      <v-btn
        color="primary"
        dark
        v-on="on"
      >
        Activator
      </v-btn>
    </template>
    <v-btn @click="$refs.menu.save()"></v-btn>
  </v-menu>