Vue js 和数据表平移不起作用

Question

好的，很不幸我遇到了这个问题。所以首先介绍一下我的应用程序的规格。我在用

1. Vue.js
2. vue-resource.js
3. jQuery
4. jQuery 数据表

现在因为我是通过 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请求收集数据后，我只是设置了一个等待时间来启动数据表。这是一个小贫民窟，但至少它有效。如果我找到更好的解决方法，我会编辑这篇文章。

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