Vue js和数据表Panigation无法正常工作

Question

好的，不幸的是我遇到过这个问题。首先，关于我的应用程序的规格。 我正在使用

1. 的 Vue.js
2. 的 VUE-resource.js
3. jQuery
4. jQuery DataTables

现在因为我通过vue-resource抓取数据，出于某种原因，当ajax调用最终完成并且vue将数据导入表时， datatables 决定不渲染分页，并且在一个页面上显示所有200个结果。无论如何刷新数据表，以便在>导入表后使用分页进行渲染？

我的ajax电话：

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


我的表：


<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>

<击> 修改 我发现没有任何功能可行。如果我尝试选择任何一行，表格会立即清理。我的模型（vue模型）仍然包含所有对象。

  

解决方案：

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

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。你可能想看一下。