datatables+vue.js怎么完美的结合？

Question

前端接api返回数据， 恩。很普通的方法
var token = localStorage.getItem('token');
vm = new Vue({

el: ".store",
data() {
    return {
        data: [],    
}
},
methods: {
    get_user_feedback(){
    this.$http({
        url: 'https://jc.sdp178.com/api/api.php',
        method: 'GET',
        params: {
            master: '10005',
            token: token,
        },
        }).then(function(res) {
            this.data = res.data;
  }
});
        }, (err) => {
            console.log(err);
        });
    }
},
mounted:function(){
this.get_user_feedback();
}

});

然后页面v-for循环出来

编号	商品图	商品名	类型	操作
{{item.id}}	<img :src="item.src" class="tpl-table-line-img" alt="">	{{item.name}}	{{item.goodsclass}}	编辑      账户明细

然后就是DataTable初始化数据
<script>
$(function() {

$('#example').DataTable();

});
</script>

然后页面的效果如图：

这个怎么处理

Answer 1

datatables 里的数据不应该直接v-for出来，应该把数据以JSON的格式传给datatables,然后watch数据的状态有没有变化，有了就把datatables reload一下，具体可看

链接描述

Answer 2

datatables是jQuery插件，vue是声明式的，理念不太一样，建议不使用datatables。只使用v-for，然后自己添加样式完成

Answer 3

或者 iviewui 的 table 提供了额外的功能

Answer 4

请问这个问题你解决了吗，我现在也遇到了

Answer 5

这个问题确实如一楼所说, DT使用V-for是不合适的, 应该用数据驱动, watch这个表格数据, 如果变化则触发表格的初始化渲染操作, 当然了这个渲染过程可以加一个是否已经初始化实例的判断, 从而进行数据刷新而不是再重复初始化等.
我现在的做法是, 根据上面的思路, 把DT彻底封装成了一个组件.
当然了 我目前遇到的问题是在列回调渲染出来的按钮, 没有办法获取到当前实例的对象