Vue.js 打开子对话框时关闭Vuetify菜单

我有一个Vuetify数据表，其中每一行都有一个菜单，其中包含许多打开对话框的选项。当对话框打开时，父v菜单保持打开状态，但我希望它关闭

我一直在寻找一种方法以编程方式关闭它，并尝试了“内容点击关闭”道具，但一旦菜单按钮点击事件发生，这似乎就不起作用了

下面是我正在使用的v-data-table代码的一个示例，在

{{item.name}
打开菜单
行动1
行动1
行动2
行动2

我想可能有一种方法可以参考每个菜单，但还没有解决这个问题。有人有什么想法吗

<template>
  <!-- data table -->
  <v-data-table :headers="headers" :items="desserts" item-key="name" class="elevation-1 pa-6">
    <!-- row name slot -->
    <template v-slot:item.name="{item}">{{item.name}}</template>

    <!-- row actions slot -->
    <template v-slot:item.actions="{item}">
      <!-- row menu -->
      <v-menu>
        <template v-slot:activator="{ on }">
          <v-btn text v-on="on">open menu</v-btn>
        </template>

        <!-- menu items -->
        <v-list>
          <!-- menu item 1 -->
          <v-list-item>
            <template>
              <div>
                <!-- dialog for menu item 1 -->
                <v-dialog v-model="menu1">
                  <template v-slot:activator="{on}">
                    <v-btn text v-on="on">action 1</v-btn>
                  </template>

                  <v-card>
                    <v-card-title>Action 1</v-card-title>
                  </v-card>
                </v-dialog>
              </div>
            </template>
          </v-list-item>

          <!-- menu item 2 -->
          <v-list-item>
            <template>
              <div>
                <!-- dialog for menu item 2 -->
                <v-dialog v-model="menu2">
                  <template v-slot:activator="{on}">
                    <v-btn text v-on="on">action 2</v-btn>
                  </template>

                  <v-card>
                    <v-card-title>Action 2</v-card-title>
                  </v-card>
                </v-dialog>
              </div>
            </template>
          </v-list-item>
        </v-list>
      </v-menu>
    </template>
  </v-data-table>
</template>