Vue破坏了DataTables和Pace JS
使用jQuery DataTables 1.10.15和Pace JS 1.0.2运行Vue 2.5.16。
当我将<div id="app"></div>包装器添加到根页面布局时，Vue组件可以工作，但是即使AJAX表数据是有效的，DataTables也不会实际显示表数据。
Pace JS有时会在一些AJAX请求加载足够大的数据以将渲染推到折叠之下后，以灰色覆盖整个屏幕。
我要做的就是删除id="app"来解决这两个问题。
控制台中没有错误。
我的DataTable实例都没有集成任何Vue组件。所有Vue组件的页面都与DataTables完全不同。
所有Pace JS页面都没有Vue组件。
我的根刀片模板代码：
<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我在app.js中的Vue初始化
window.Vue = require('vue');
Vue.component('edit-plans', require('./components/plans/edit.vue'));
window.onload = function () {
const app = new Vue({
el: '#app'
});
};目前在Laravel 5.4中集成了所有这些功能，如果有任何不同之处的话。
这可能是什么原因造成的？
回答 1
Stack Overflow用户
发布于 2018-03-21 15:44:01
如果您将jQuery / default保留在其默认的全新安装状态，我相信您会发现bootstrap.js文件已经在全局加载Laravel。我的猜测是，由于您是在根页面页脚中加载jQuery，所以它加载两次的事实导致了您的问题。当您删除Vue实例<div id="app"></div>时，您只需加载一次jQuery，事情就会再次正常运行。
因此，看看简单地删除您的CDN <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>是否可以解决这个问题。
如果包含的jQuery版本不够新，那么使用npm更新它。
https://stackoverflow.com/questions/49397885
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号