如何在 Vue 中点击菜单项后手动关闭 Vuetify 2 的下拉菜单

在 vuetify 2 中，当菜单内嵌套自定义组件（如对话框封装器）时，`close-on-click` 可能失效；通过绑定 `v-model` 控制菜单显隐，并在目标列表项添加 `@click=”showmenu = false”` 即可可靠关闭。

vuetify 2 的 默认支持 close-on-click 属性，但该行为仅对直接子元素的原生点击事件生效。一旦菜单项中嵌套了自定义组件（例如 ），其内部事件冒泡或 v-on 绑定可能干扰默认关闭逻辑，导致点击后菜单未关闭。

解决方法是放弃完全依赖 close-on-click，改用显式状态控制：为 绑定 v-model，将其与一个布尔响应式数据（如 showMenu）关联，从而获得完全可控的打开/关闭能力。

以下是优化后的代码结构：

✅ 关键要点说明：

立即学习“前端免费学习笔记（深入）”；

• v-model=”showMenu” 让菜单状态完全受控，避免 close-on-click 的不可靠性；
• @click=”showMenu = false” 直接作用于 ，确保点击即关闭；
• 对内部 @click 添加 .stop 修饰符（如 @click.stop=”zamknij”），防止事件冒泡导致重复触发或干扰菜单关闭；
• 若需在关闭菜单的同时打开对话框，建议将 zamknij 逻辑与 showMenu = false 合并调用，或使用 $nextTick 确保菜单 DOM 已移除后再操作子组件。

此方案兼容 Vuetify 2.x 全版本，不依赖外部监听器，简洁、健壮且易于维护。