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

Question

Я создаю несколько всплывающих меню с V-меню; по одному на каждую строку в моей таблице. Мне нужно, чтобы меню закрывалось при нажатии кнопки «Отправить». Я не могу использовать v-model = "menu" и сделать меню false или true, чтобы скрыть или показать меню, потому что тогда каждое меню откроется, когда я установлю его в true! Кто-нибудь знает другой способ закрыть меню, не используя v-модель? Я нашел способ открыть его, используя слот активатора. Возможно, есть слот для активатора, который также закроет компонент?

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

EDIT вы также можете использовать $ 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>