javascript - 正确实现 Vue.js + DataTables

Question

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

在 firefox 上检查这个 fiddle (不适用于 chrome): http://jsfiddle.net/chrislandeza/xgv8c01y/

当我更改 DataTable 的状态时(例如排序、搜索等):

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

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

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

这是上面 fiddle 的代码:

HTML:

<div class='container-fluid' id="app">
        <div class='row'>
            <div class='col-md-9'>
                <table class="table table-bordered" id="app-datatable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-repeat="user: users">
                            <td>{{ user.name }}</td>
                            <td>{{ user.age }}</td>
                            <td>
                                <button type="button" v-on="click: foo(user)">Action</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class='col-md-3'>
                <div class="form-group">
                    <label>Name</label>
                    <input type="text"
                           class="form-control"
                           v-model="newUser.name"
                           >
                </div>

                <div class="form-group">
                    <label>Age</label>
                    <input type="name"
                           class="form-control"
                           v-model="newUser.age"
                           >
                </div>
                <button type="submit" class="btn btn-primary" v-on="click: addUser()">Add</button>
            </div>
        </div>
    </div>

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

要使 DataTables 插件与 Vue 正确集成，需要牢记以下几点:

1. 根据您的示例，您可以使用 var dT = $('#app-datatable').DataTable();如果您已经准备好数据并将其呈现给 DOM，则初始化数据表。如果你没有 DOM <table></table>完全呈现(可能是由于通过延迟的 ajax 调用填充的数据)，在数据准备好之前不能初始化 DataTables。例如，如果您有一个 fetchData组件中的方法，您可以在 promise 履行后初始化 DataTable。

2. 要在初始化后更新表，可能是由于底层表数据发生变化，最好(也许是唯一的方法)是先销毁表，然后再接收新数据并将其写入Vue 的 DOM:

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

   然后，一旦数据(在您的例子中是用户数组)被更新，像这样重新初始化 DataTable:

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

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

3. 另一个重点是在数据集中有一个行 ID，并在 <tr></tr> 中设置键。 :

   <tr v-repeat="user: users" track-by="id">

   没有 track-by , Vue 在 DataTables 初始化后将新数据刷新到 DOM 时会报错，这可能是因为没有找到被 DataTables 劫持的 DOM 元素。