Vue 打破了 DataTables 和 Pace JS答案

【问题标题】：Vue breaks DataTables and Pace JSVue 打破了 DataTables 和 Pace JS
【发布时间】：2018-08-30 01:47:01
【问题描述】：

使用 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 组件都位于与 DataTable 完全不同的页面上。

所有 Pace JS 页面都没有 Vue 组件。

我的根 Blade 模板代码：

<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 中集成所有这些功能，如果这有什么不同的话。

这可能是什么原因造成的？

【问题讨论】：

标签： jquery vue.js datatables vuejs2

【解决方案1】：

如果你让 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 更新它。

【讨论】：

很遗憾，这并没有解决问题。
DataTables 代码仍然执行并进行 AJAX 调用以加载数据，但 XHR 请求完成后表格数据从未出现。