Vue js 和数据 Table Panigation 不起作用

Question

好的，很遗憾我遇到了这个问题。因此，首先介绍一下我的应用程序的规格。我正在使用

Vue.js
vue-resource.js
jQuery
jQuery数据Tables

现在因为我正在通过 vue-resource 抓取数据，出于某种原因，当 ajax 调用最终完成并且 vue 将数据导入 table， datatables决定不渲染分页，将200条结果全部显示在一页上。无论如何要刷新 datatables 所以它是用分页呈现的 after 它已被导入 table ？

我的 ajax 电话:

       this.$http.get('getDispachedEmails', function(data){
          console.log(data['orders']);
          this.customers.push(data['orders']);
          var dt = $('#myTable').DataTable();
        });

我的Table:

<table id="myTable" class="u-full-width">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr v-repeat="customers[0]">
      <td>@{{ firstName }}  @{{ lastName }}</td>
      <td>@{{ email }}</td>
      <td>@{{ trackingNumber }}</td>
      <td>@{{ address }}</td>
    </tr>
  </tbody>
</table>

~~编辑我发现 none 的功能有效。如果我尝试 select 任何行，table 会立即被清除。我的模型（vue 模型）里面仍然有所有的对象。~~

SOLUTION:

我只是在通过 ajax 请求收集数据后设置等待时间来启动数据 tables。这是一个小贫民窟，但至少它有效。如果我找到更好的修复方法，我会编辑这个 post。

this.$http.get('getDispachedEmails', function(data){
  console.log(data['orders']);
  this.customers.push(data['orders']);
  setTimeout(function(){$('#myTable').DataTable();}, 5000);

});

Answer 1

延迟为 0 对我有用，但不确定为什么。

setTimeout(function(){$('#myTable').DataTable();}, 0);

Answer 2

我已经构建了一个专用的 vue 网格组件：vue-tables。您可能想检查一下。

Vue js 和数据 Table Panigation 不起作用

Vue js and Data Table Panigation not Working

javascript

datatables

vue.js