Внедрение Vue.JS + DataTables правильно

Im пытается реализовать Vue.Таблицы данных js + jQuery, но происходят странные вещи.

, проверьте эту скрипку в firefox (не работает в chrome): http://jsfiddle.net/chrislandeza/xgv8c01y/

когда я изменяю состояние DataTable (например, сортировка,поиск и т. д.):

  • вновь добавленные данные в списке исчезают
  • DOM не читает директивы или vue свойства

Я уверен, что любой, кто пытался смешать vue.JS+datatables столкнулись с этой проблемой. что вы сделали, чтобы решить эту проблему?

или есть чистый Vue.сценарий / плагин js, который имеет ту же (или близкую) функциональность, что и DataTable jquery? (разбиение на страницы, поиск, сортировка, количество отображаемых записей и т. д.).

вот код из скрипки выше:

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

любой предложения очень ценятся.

9
datatables javascript jquery vue.js

2 ответов

чтобы получить плагин DataTables правильно интегрирован с Vue, есть несколько вещей, чтобы иметь в виду:

  1. в вашем примере, вы можете использовать var dT = $('#app-datatable').DataTable(); для инициализации DataTables, если у вас уже есть данные, готовые и отображаемые в DOM. Если у вас нет DOM <table></table> полностью визуализирован (возможно, из-за данных, заполненных с помощью отложенного вызова ajax), вы не можете инициализировать DataTables, пока данные не будут готовы. В качестве примера, если у вас есть fetchData метод в компонент, вы можете инициализировать DataTable как только обещание было выполнено.

  2. чтобы обновить таблицу после инициализации, возможно, из-за изменения данных базовой таблицы, лучше всего (возможно, единственный способ) сначала уничтожить таблицу, прежде чем новые данные будут получены и записаны в DOM Vue:

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

    затем, как только данные (в вашем случае, массив пользователей) были обновлены, повторно инициализируйте DataTable следующим образом:

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

    в $nextTick необходим для обеспечения того, чтобы Vue сбросил новые данные в DOM перед повторной инициализацией. Если DOM обновляется после инициализации плагина DataTable, вы увидите данные таблицы, но обычную сортировку, подкачку и т. д. не получится.

  3. еще один важный момент - иметь идентификатор строки в наборе данных и установить ключ в <tr></tr>:

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

    без track-by, Vue будет жаловаться при промывке новых данных в DOM после DataTables инициализируется, вероятно, из-за не нахождения элементов DOM hi-jacked DataTables.

23

возможно, вы можете использовать крючки жизненного цикла, воздействовать на эти странные вещи, вызванные конкуренцией манипулирования DOM. в вашем экземпляре vue добавьте созданный () крюк, затем инициализируйте 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();
      })
    }

});

0