元素导航项下拉菜单在 laravel vue 中不起作用

Posted 2023-02-22

【中文标题】元素导航项下拉菜单在 laravel vue 中不起作用

【英文标题】：The element nav-item dropdown not working in laravel vue

【发布时间】：2020-06-25 15:31:19

【问题描述】：

我也在使用 laravel 和 vue js Adminlte 一开始它可以工作，但现在....

头

<!-- Font Awesome Icons -->


<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!--Css-->

  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

导航

<ul class="navbar-nav ml-auto">
  <!-- Messages Dropdown Menu -->

  <!-- Cerrar sesión menu -->
  <li class="nav-item dropdown">

    <a class="nav-link" data-toggle="dropdown" href="#">
      <i class="fas fa-users-cog"></i>          
    </a>
    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
      <span class="dropdown-header">Cerrar sesión</span>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item">
        <form action="route('logout')" method="POST">
           csrf_field()      
          Usuario                        
          <button type="submit" class="float-right text-muted text-sm"><i class="fas fa-sign-out-alt mr-2"></i> Salir  </button>
        </form>
      </a>          
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i
        class="fas fa-th-large"></i></a>
  </li>
</ul>

脚本

<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>

它告诉我：DevTools 无法解析 SourceMap：http://x.x.x.x:8000/js/popper.js.map data-toggle="dropdown" 不显示元素

在组件 app.js 中

require('./bootstrap');

require('./components/Example');

import Multiselect from 'vue-multiselect';

Vue.component('multiselect', Multiselect);

问题来了，当我使用 npm run dev 生成的 app.js 使它不起作用时，任何想法

【问题讨论】：

请分享您的脚本

@BoussadjraBrahim 其中哪一个

vue 实例或使用下拉菜单的组件

它可以工作，但是 app.js 会产生问题

我需要你自己的脚本

【参考方案1】：

我遇到了同样的问题。造成这种情况的原因是 AdminLTE 模板和 Vue.js 还包含 Bootstrap 并且它们发生冲突。所以你必须注释掉或删除 Bootstrap 4 脚本标签，这一行：

<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

这一行已经是多余的了。