Как открыть и закрыть несколько v-меню в моем компоненте VueJS / Vuetify?

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-модель для каждой строки.

<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>