如何在 vuejs 中使用新数据刷新数据表？答案

【问题标题】：How to refresh datatables with new data in vuejs?如何在 vuejs 中使用新数据刷新数据表？
【发布时间】：2018-12-28 09:44:17
【问题描述】：

我在 vue js 中使用数据表1.10.19。在这里，我有一个动态表，单击某个按钮，它过滤并用新数据替换表到表的 tr 标记。如何用新内容刷新表？我使用了clear，destroy，但没有任何效果。这是我的完整代码。

Code Link

【问题讨论】：

能否请您分享更多我们可以看到的代码，您如何获取新数据等等......
试试$('#datatable').DataTable().ajax.reload();
我正在使用带有 vue js 的数据表。数据表第一次工作，但在使用过滤器调用动态数据并对其进行重新处理时，它不会工作。
显示你的代码。
这个问题可能是你更新dataTable之前没有更新DOM数据造成的。因此，您必须使用 this.$nextTick() 等待下一个 Tick。 Here is a similar question 可能对你有帮助

标签： javascript vue.js datatable datatables

【解决方案1】：

像这样更新你的代码，它应该可以工作

$('.reportDataTableModelWise').DataTable().destroy();

在从this.$store.commit('modelWiseTabularReport');调用数据之前

并像这样更新您的更新代码

this.$nextTick(function() {
        $('.reportDataTableModelWise').DataTable({
            'destroy'     : true,
            'paging'      : true,
            'lengthChange': true,
            'searching'   : true,
            'ordering'    : true,
            'order'       : [[ 5, 'desc' ]],
            'info'        : true,
            'autoWidth'   : false,
            'dom'         : 'Blfrtip',
            'buttons'     : [
                {
                    'extend': 'csv',
                    'title': this.$route.meta.report_name + ' Report'
                },
                {
                    'extend': 'pdf',
                    'title': this.$route.meta.report_name + ' Report'
                },
                {
                    'extend': 'print',
                    'title': this.$route.meta.report_name + ' Report'
                }
            ]
        });
    });

$nextTick 是必要的，以确保 Vue 在重新初始化之前已将新数据刷新到 DOM。

【讨论】：

【解决方案2】：

您也可以使用以下方法重绘您的表格：

   ...
   watch: {
     myData () { // data used in the table
       this.$nextTick (() => { // wait until data fully updated before re-render new DOM 
         $('.reportDataTableModelWise').DataTable().draw();
       })
     }
   }

【讨论】：