相关疑难解决方法(0)

我试图实现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" …