正确实现Vue.js + DataTables

我试图实现Vue.js + jQuery的DataTables，但有一些奇怪的事情发生。

在firefox上查看这个小提琴（不在chrome上工作） ： http ： //jsfiddle.net/chrislandeza/xgv8c01y/

当我改变DataTable的状态时（例如排序，搜索等）：

• 列表上新添加的数据消失了
• DOM不读取指令或vue属性

我很确定任何试图混合vue.js +数据表的人都会遇到这个问题。 你做了什么来解决这个问题？

或者是否有一个纯粹的Vue.js脚本/插件，它具有与jquery的DataTable相同（或关闭）的function？ （分页，搜索，排序，显示的条目数等）。

这是上面小提琴的代码：

HTML：

 
 
 
 
 
 
Name
 
Age
 
 
 
 
 
 
{{ user.name }}
 
{{ user.age }}
 
 Action 
 
 
 
 
 
 
 Name  
 
 Age  
 Add 
 
  

JavaScript的：

 $(document).ready(function () { var dT = $('#app-datatable').DataTable(); }); var vm = new Vue({ el: '#app', data: { newUser: {}, users: [ {name: 'Chris', age: 1}, {name: 'John', age: 2} ] }, methods:{ addUser: function(){ this.users.push(this.newUser); this.newUser = {}; }, foo: function(user){ console.log(user.name); } } }); 

任何建议都非常感谢。

Answer 1

要使用Vue正确集成DataTables插件，需要记住以下几点：

1. 根据您的示例，您可以使用var dT = $('#app-datatable').DataTable(); 如果已准备好数据并将其呈现给DOM，则初始化DataTables。 如果您没有完全呈现DOM

   （可能是由于通过延迟的ajax调用填充的数据），则在数据准备好之前无法初始化DataTable。 例如，如果组件中有fetchData方法，则可以在履行承诺后初始化DataTable。

2. 要在初始化后更新表，可能是由于基础表数据的更改，最好（也许是唯一的方法）是在接收新数据并由Vue写入DOM之前首先销毁表：

    var dT = $('#app-datatable').DataTable(); dT.destroy(); 

   然后，一旦数据（在您的情况下，用户数组）已更新，重新初始化DataTable，如下所示：

    this.$nextTick(function() { $('#app-datatable').DataTable({ // DataTable options here... }); }) 

   在重新初始化之前，$ nextTick是确保Vue将新数据刷新到DOM所必需的。 如果在初始化DataTable插件之后更新DOM，您将看到表数据，但通常的排序，分页等将不起作用。

3. 另一个重点是，在数据集中有一个行id，并在

   设置键：

   如果没有track-by ，Vue会在DataTables初始化后将新数据刷新到DOM时抱怨，可能是因为没有找到DataTables支持的DOM元素。

Answer 2

也许你可以使用生命周期钩子，事实上这些奇怪的事情是由操纵DOM的竞争引起的。 在你的vue实例中，添加一个created（）钩子然后初始化DataTable，就像下面这样：

 var vm = new Vue({ el: '#app', data: { newUser: {}, users: [ {name: 'Chris', age: 1}, {name: 'John', age: 2} ] }, methods:{ addUser: function(){ this.users.push(this.newUser); this.newUser = {}; }, foo: function(user){ console.log(user.name); } }, created(){ this.$nextTick(function() { $('#app-datatable').DataTable(); }) } 

}）;