Vuejs 2 多级下拉菜单

Answer 1

看起来您正在尝试使用 b-dropdown 组件在 Vue.js 中实现多级下拉菜单，我认为它是 Bootstrap-Vue 或类似库的一部分。但是，从您的代码片段来看，子菜单下拉列表似乎未正确配置为充当嵌套下拉列表。父下拉列表可以包含嵌套下拉列表，但嵌套下拉列表本身需要正确的设置才能将其内容显示为下拉列表。

以下是如何修改代码以确保嵌套下拉菜单正确运行的方法：

1. 确保正确使用嵌套下拉列表的作用域插槽：在 Bootstrap-Vue 中，如果您使用嵌套下拉列表，通常需要使用作用域插槽来正确渲染嵌套下拉列表及其项目的切换。

2. 如有必要，请使用 b-nav-item-dropdown：如果您位于导航栏上下文中，b-nav-item-dropdown 可能比 b-dropdown 更合适。

3. 确保正确处理点击事件：Vue.js 需要正确定义方法并正确绑定到点击事件。

   贝努茨管理 罗伦管理 管理责任

     <b-nav-item-dropdown text="Submenu" right>
       <b-dropdown-item @click="handleSubMenuClick">1</b-dropdown-item>
       <b-dropdown-item @click="handleSubMenuClick">2</b-dropdown-item>
       <b-dropdown-item @click="handleSubMenuClick">3</b-dropdown-item>
     </b-nav-item-dropdown>
   </b-nav-item-dropdown>
   

   导出默认值{ 方法： { 处理子菜单点击() { console.log("点击了!!"); } } }

主要变化：

• b-nav-item-dropdown：这用于更好地集成在导航栏中。
• 嵌套下拉菜单：封装在另一个 b-nav-item-dropdown 中以获得正确的行为。
• Vue 方法：确保您的方法在 Vue 实例中正确定义。

最后，如果您正在使用 Bootstrap-Vue，请确保您的 Vue 项目正确导入和配置它。您可能还想检查您的项目设置是否正确包含 Bootstrap CSS 和 JS，以获得正确的下拉功能。