小编Chr*_*eza的帖子

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

我是Vue.js的新手,我正在搞乱它.有没有办法创建可重用的方法和数据？

这是我想要实现的非常简单的代码:

page1.html

<div id="app">
  <button type="button" v-on="click: foo()">Foo</button> 
  <button type="button" v-on="click: bar()">Bar</button>
</div>

<script src="reusable.js"></script> 
<script src="page1.js"></script>  <-- Custom script -->

page2.html

<div id="app">
  <button type="button" v-on="click: foo()">Foo</button> 
  <button type="button" v-on="click: baz()">Baz</button>
</div>

<script src="reusable.js"></script> 
<script src="page2.js"></script>  <-- Custom script -->

reusable.js

var vm = new Vue({
  el: '#app',
  data: {
    name: 'John'
  },
  methods: {
    foo: function(){
      console.log('foo');
    }
  }
});

现在我想在我的reusable.js的VM 上访问数据或添加方法,所以我可以在page1.js或page2.js上访问它.我不知道该怎么做,但我希望实现这样的目标:

page1.js

// adds a new method on …