元素导航项下拉列表在laravel vue中不起作用

Question

我使用laravel和vue-js也管理一开始它是有效的，但现在。。。。

磁头

<!-- 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.mapdata toggle="下拉菜单"不显示元素

在组件app.js 中

require('./bootstrap');
require('./components/Example');
import Multiselect from 'vue-multiselect';
Vue.component('multiselect', Multiselect);

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

Answer 1

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

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

这条线路已经是多余的了。