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

Question

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

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

下面是我正在使用的 v-data-table 代码示例，在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>

我认为可能有一种方法可以引用每个菜单，但还没有成功。有没有人有任何想法？

标签： vue.jsvuetify.js