Javascript 实现Vue.js+；正确使用数据表

我正在尝试实现Vue.js+jQuery的DataTables，但是发生了一件奇怪的事情

在firefox上检查此小提琴（不适用于chrome）：

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

• 列表中新添加的数据将消失
• DOM没有读取指令或vue属性

我敢肯定，任何试图混合使用vue.js+datatables的人都会遇到这个问题。你做了什么来解决这个问题

或者是否有一个纯Vue.js脚本/插件具有与jquery的DataTable相同（或相近）的功能？（分页、搜索、排序、要显示的条目数等）

下面是上面小提琴的代码：

HTML:

---

非常感谢您的建议。

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

根据您的示例，您可以使用

var dT=$（'#app datatable'）.datatable（）初始化数据表。如果没有完全呈现DOM
（可能是由于通过延迟的ajax调用填充了数据），则在数据准备就绪之前无法初始化数据表。例如，如果组件中有
fetchData
方法，则可以在承诺实现后初始化DataTable

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

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

然后，一旦数据（在您的例子中是用户数组）被更新， 重新初始化数据表，如下所示：

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

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

另一个要点是在数据集中有一个行id，并在

中设置键：

如果没有

track by

，则在初始化DataTables后将新数据刷新到DOM时，Vue将发出抱怨，这可能是因为找不到DataTables占用的DOM元素

---

也许您可以使用生命周期挂钩，事实上，这些奇怪的事情是由操纵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();
      })
    }

---

}))

我从外部提供了表数据（不是来自

DataTable

的Ajax调用），仅使用这些生命周期挂钩销毁/重新创建表对我来说是可行的：

beforeUpdate: function() {
    if (this.dataTable) {
        this.dataTable.destroy()
    }
},
updated: function() {
    this.dataTable = $(this.$el).DataTable()
}

从

beforeUpdate钩子在组件上的数据更改之后运行，更新周期开始，就在DOM被修补和重新呈现之前。它允许您在组件上的任何反应数据实际呈现之前获取其新状态

---

更新的钩子在组件上的数据更改后运行，DOM重新呈现。如果在属性更改后需要访问DOM，这里可能是最安全的地方

小提琴不起作用，因为您直接引用了githubusercontent-您应该使用rawgithub.com->查看问题与在angular中使用jQuery样式的dataTables时相同。两者都试图操纵DOM，vue正在赢得这场战斗。遗憾的是，我认为没有现成的解决方案。

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

beforeUpdate: function() {
    if (this.dataTable) {
        this.dataTable.destroy()
    }
},
updated: function() {
    this.dataTable = $(this.$el).DataTable()
}