使用jQuery DataTables 1.10.15和Pace JS 1.0.2运行Vue 2.5.16。
当我将credential.refreshToken()包装器添加到我的根页面布局时，Vue组件可以工作，但即使AJAX表数据有效，DataTables也不会实际显示表数据。
Pace JS有时会在一些AJAX请求加载数据之后将整个屏幕覆盖在灰色叠加层中，这些请求加载的数据足以将渲染数据推到最下方。
我所要做的就是删除<div id="app"></div>以解决其中任何一个问题。
控制台中没有错误。
我的DataTable实例都没有集成任何Vue组件。所有Vue组件都与DataTables的页面完全不同。
所有Pace JS页面都没有Vue组件。
我的根刀片模板代码：
id="app"我的<body id="page-top">
@if(Auth::check())
@include('layouts.navigation')
@endif
<div id="page-wrapper" class="gray-bg">
@if(Auth::check())
@include('layouts.topnavbar')
@endif
<div class="wrapper wrapper-content" id="app">
@yield('content')
</div>
@include('layouts.footer')
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{!! mix('js/app.js') !!}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
</body>
初始化脚本：
DataTables包含简单组件的示例@push('scripts')
<script>
$(function () {
$('#plans-table').DataTable({
dom: '<"html5buttons"B>lTfgitp',
pageLength: 25,
scrollX: true,
colReorder: true,
processing: true,
serverSide: true,
deferRender: true,
stateSave: true,
ajax: '{!! route('plans.data') !!}'
});
});
</script>
@endpush
页面：
edit.blade.php @if(Auth::user()->can('edit-plans'))
<edit-plans
:plan="{{ json_encode($plan) }}"
></edit-plans>
@endif
中的我的Vue初始化：
app.js目前将所有这些整合到Laravel 5.4中，如果这有任何区别的话。
导致这种情况的原因是什么？
答案 0 :(得分：0)
如果您已将Laravel / Webpack保留为其默认的全新安装状态，我相信您会发现bootstrap.js文件已在全局加载jQuery。我的猜测是，因为你在你的根页面页脚加载jQuery，它加载两次的事实导致你的问题。当您删除Vue实例<div id="app"></div>时，您只需加载一次jQuery，然后再次运行。
所以，看看是否只是删除CDN <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>就可以解决问题。
如果包含的jQuery版本不够新，那么使用npm更新它。