如何在 VueJS / Vuetify 组件中打开和关闭多个 v 菜单？

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>