正确实现Vue.js + DataTables

Question

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

在firefox上查看这个小提琴(不使用chrome):http: //jsfiddle.net/chrislandeza/xgv8c01y/

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

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

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

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

这是上面小提琴的代码:

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

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

1. 根据您的示例,var dT = $('#app-datatable').DataTable();如果已准备好数据并将其呈现给DOM ,则可以使用它来初始化DataTable.如果您没有<table></table>完全呈现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,并在以下位置设置键<tr></tr>:

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

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