MetisMenuJS 侧边栏无法正常工作（laravel+vujs）项目

Question

我从 themeforest 购买了一个主题 (https://themesbrand.com/minible/layouts/index.html)。他们使用 metisMenujs，它在 HTML 和 bootstrap 中工作得很好。但我将其转换为后端为 laravel 的 vuejs 应用程序。

问题是metismenu没有正确折叠。虽然我已阅读 MetisMenuJs 文档 (https://onokumus.github.io/metismenujs/) 但找不到任何解决方案。需要专家帮助。

谢谢。

Answer 1

我了解您在将主题转换为具有 Laravel 后端的 Vue.js 应用程序后遇到 MetisMenuJS 无法正确折叠的问题。让我们逐步完成一些步骤来排除故障并可能解决此问题：

1. 首先，确保您已在 Vue.js 项目中正确安装 MetisMenuJS。您可以通过 npm 执行此操作：

npm install metismenujs

2. 在使用侧边栏的 Vue 组件中，导入 MetisMenu：

import MetisMenu from 'metismenujs';

3. 在 Vue 组件的

   mounted

   生命周期挂钩中初始化 MetisMenu。这可确保 DOM 在应用 MetisMenu 之前准备就绪：

export default {
  mounted() {
    new MetisMenu('#side-menu');
  }
}

确保“#side-menu”与侧边栏菜单元素的 ID 匹配。

4. 确保您的侧边栏 HTML 结构正确。 MetisMenu 需要特定的结构：

<ul id="side-menu">
  <li>
    <a href="#" aria-expanded="false">Menu Item</a>
    <ul aria-expanded="false">
      <li><a href="#">Submenu Item</a></li>
    </ul>
  </li>
</ul>

5. 如果您要动态渲染菜单（这可能在 Vue.js 应用程序中），则可能需要在填充菜单项后重新初始化 MetisMenu。您可以在观察程序中或在获取菜单项的 API 调用之后执行此操作。

6. 检查是否有CSS冲突。您购买的主题可能具有特定的 CSS，这些 CSS 未在您的 Vue.js 版本中正确应用。

7. 确保包含 MetisMenu 和主题所需的任何 CSS 文件。

8. 如果您使用 Vue Router，请确保它不会干扰 MetisMenu 的功能。

如果这些步骤不能解决问题，查看实际代码会很有帮助。您能否提供：

1. 相关Vue组件代码
2. 侧边栏的 HTML 结构
3. 您看到的任何控制台错误

有了这些信息，我可以提供更具体的指导。另外，既然您提到您购买了该主题，您可能需要联系该主题的支持团队，因为他们可能有与 Vue.js 和 Laravel 集成的具体说明。