How do I open and close multiple v-menus in my VueJS / Vuetify component?

Question

I create multiple popover menus with v-menu; one for each row in my table. I need a way for the menu to close when I click submit. I cannot use v-model="menu" and make menu false or true to hide or show the menu because then every menu will open when I set it to true! Does anyone know another way to make the menu close, without using v-model? I have found a way to open it using the activator slot. Perhaps there is an activator slot that will close the component, as well?

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

Honaker

Answer 1

Just add v-model for each row.

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

EDIT you also can use $refs just add it to v-menu and call save() to close it.

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

Chesna

How do I initialize these new v-models in the data()? – Honaker

You could add it to whole table array like items.map(v => ({...v, menu: false})) but it should work without it. Just try to add it without init. – Chesna

I've updated my answer since I remembered that you can actually close it without v-model using $refs. – Chesna

this work when you need to close it, but when you need to open it? – Dignadignified

@Dignadignified just console.log $refs.menu it should have open() or similar method. Or you can always imitate click event $refs.menu.$el.click() or with vanilla js simply set id for menu and then document.getElementById('menu').click(). It has been a while since I used vue2 and vuetify so syntax might be wrong. – Chesna