Vuejs和datatables:使用v-for填充数据时表为空

我正在尝试使用vuejs v-for directive和ajax来填充数据表以获取数据,但表格始终显示"表格中没有数据",即使显示了一些数据,也在底部显示"显示0到0个条目中的0个".我想这是因为vuejs是被动的并且表格无法识别这些变化吗？我一直在寻找和尝试一段时间,但没有找到解决方案..

非常感谢!:)

这是模板:

            ...
        
            ...
        

    

        

            
...
    
    
                            
        

            
{{ supplier.Supplier_ID }}
            
...
    

和vue和ajax:

export default {
    data() {
        return {
            suppliers: [],
        }
    },
    methods: {
        fetchSuppliers() {
            this.$http.get('http://localhost/curemodules/public/suppliers/list')
            .then(respOnse=> {
                this.suppliers = JSON.parse(response.bodyText).data;
            });
        }
    },
    created() {
        this.fetchSuppliers();
    },
}

初始化后,DataTables不会自动重新解析DOM.这是一个相关的常见问题:

问:我使用DOM/jQuery向表中追加一行,但在重绘时删除了它.

答:这里的问题是DataTables不知道你对DOM结构的操作 - 也就是说它不知道你已经添加了一个新行,当它重绘它时会删除未知行.要添加,编辑或必须使用数据表API(特别是一个DataTable中删除信息row.add(),row().data()和row().remove()方法来添加,编辑和删除行.

但是,您可以table.destroy()在重新初始化之前调用以销毁当前实例.关键是延迟重新初始化,直到$nextTick()Vue可以刷新旧的DOM DataTables.这最好从观察者开始,suppliers以便在DataTables更新变量时自动完成重新初始化fetchSuppliers().

mounted() {
  this.dt = $(this.$refs.suppliersTable).DataTable();
  this.fetchSuppliers();
},
watch: {
  suppliers(val) {
    this.dt.destroy();
    this.$nextTick(() => {
      this.dt = $(this.$refs.suppliersTable).DataTable()
    });
  }
},

演示