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

Question

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

我一直在寻找一种以编程方式关闭此菜单的方法，并尝试了 close-on-content-click 道具，但是一旦发生菜单按钮click事件，这种方法似乎就不起作用了。

下面是我正在使用的v数据表代码的示例，并在https://codesandbox.io/s/vuetify-data-table-filtering-fzyxf进行了现场演示

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

我认为可能有一种方法可以引用每个菜单，但尚未设法解决。有人有什么想法吗？