Vuetify：点击菜单项打开Dialog后菜单仍显示的问题求助

在Vuetify开发中，点击v-menu内的菜单项弹出v-dialog时，菜单会保持展开状态，这一问题和v-dialog的activator="parent"配置直接相关——该配置会阻止点击事件冒泡，导致v-menu无法感知到点击操作从而自动关闭。

原问题代码 #

<template>
  <v-menu>
    <template v-slot:activator="{ props }">
      <v-btn color="primary" v-bind="props"> Activator slot </v-btn>
    </template>
    <v-list>
      <v-list-item v-for="(item, index) in items" :key="index" :value="index">
        <v-list-item-title> {{ item.title }} </v-list-item-title>

        <!-- dialog -->
        <v-dialog activator="parent" width="800">
          <v-card>
            <v-card-item>
              <v-card-title>
                <v-icon size="small">mdi-archive</v-icon>
                Add comment to archive
              </v-card-title>
            </v-card-item>
            <v-card-text>
              <v-textarea />
            </v-card-text>
            <v-card-actions>
              <v-btn>Close</v-btn>
              <v-spacer />
              <v-btn>Submit</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <!--/dialog -->
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  data: () => ({
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
}
</script>

解决方案一：通过v-model手动控制菜单状态 #

给v-menu绑定v-model，监听v-dialog的click:open事件，在对话框打开时主动关闭菜单：

<template>
  <v-menu v-model="menuOpen">
    <template v-slot:activator="{ props }">
      <v-btn color="primary" v-bind="props"> Activator slot </v-btn>
    </template>
    <v-list>
      <v-list-item v-for="(item, index) in items" :key="index" :value="index">
        <v-list-item-title> {{ item.title }} </v-list-item-title>

        <v-dialog activator="parent" width="800" @click:open="menuOpen = false">
          <v-card>
            <v-card-item>
              <v-card-title>
                <v-icon size="small">mdi-archive</v-icon>
                Add comment to archive
              </v-card-title>
            </v-card-item>
            <v-card-text>
              <v-textarea />
            </v-card-text>
            <v-card-actions>
              <v-btn>Close</v-btn>
              <v-spacer />
              <v-btn>Submit</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  data: () => ({
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
    menuOpen: false
  }),
}
</script>

解决方案二：调用v-menu实例的close方法 #

给v-menu添加ref，在dialog打开时直接调用菜单的close()方法：

<template>
  <v-menu ref="menu">
    <template v-slot:activator="{ props }">
      <v-btn color="primary" v-bind="props"> Activator slot </v-btn>
    </template>
    <v-list>
      <v-list-item v-for="(item, index) in items" :key="index" :value="index">
        <v-list-item-title> {{ item.title }} </v-list-item-title>

        <v-dialog activator="parent" width="800" @click:open="$refs.menu.close()">
          <v-card>
            <v-card-item>
              <v-card-title>
                <v-icon size="small">mdi-archive</v-icon>
                Add comment to archive
              </v-card-title>
            </v-card-item>
            <v-card-text>
              <v-textarea />
            </v-card-text>
            <v-card-actions>
              <v-btn>Close</v-btn>
              <v-spacer />
              <v-btn>Submit</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  data: () => ({
    items: [
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me' },
      { title: 'Click Me 2' },
    ],
  }),
}
</script>

两种方法都能解决菜单不关闭的问题，核心是绕过activator="parent"的事件阻止，主动触发菜单的关闭逻辑。

内容的提问来源于stack exchange，提问作者Umid Abulkasimov