Vuejs 和数据表:使用 v-for 填充数据时表为空 [英] Vuejs and datatables: table empty when using v-for to fill data

问题描述

我正在尝试使用 vuejs v-for 指令和 ajax 填充数据表以获取数据，但该表始终显示表中无可用数据"，即使显示了一些数据并且底部也显示显示 0 到 0 个条目，共 0 个条目".我猜这是因为 vuejs 是反应性的，并且表可能无法识别更改?我一直在寻找和尝试一段时间，但没有找到解决方案..

I'm trying to fill a datatable using vuejs v-for directive and ajax to get the data but the table is always showing "No data available in table" even though there are some data shown and also in the bottom says "Showing 0 to 0 of 0 entries". I guess this is because vuejs is reactive and the table can't recognize the changes maybe? I've been searching and trying for a while but with no solution found..

非常感谢！:)

这是模板:

<table id="suppliersTable" class="table table-hover table-nomargin table-bordered dataTable">
    <thead>
        <tr>
            <th>...</th>
            ...
        </tr>
    </thead>
    <tbody>                            
        <tr v-for="supplier in suppliers">
            <td>{{ supplier.Supplier_ID }}</td>
            <td>...</td>
            ...
        </tr>
    </tbody>
</table>

以及 vue 和 ajax:

and the vue and ajax:

<script>
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.这是相关的常见问题解答:

Once initialized, DataTables does not automatically reparse the DOM. Here's a relevant FAQ:

问.我使用 DOM/jQuery 在表格中添加了一行，但它在重绘时被删除.

A.这里的问题是 DataTables 不知道您对 DOM 结构的操作 - 即它不知道您添加了一个新行，并且当它进行重绘时，它将删除未知行.要从 DataTable 添加、编辑或删除信息，您必须使用 DataTables API(特别是 row.add(), row().data() 和 row().remove() 添加、编辑和删除行的方法.

A. The issue here is that DataTables doesn't know about your manipulation of the DOM structure - i.e. it doesn't know that you've added a new row, and when it does a redraw it will remove the unknown row. To add, edit or delete information from a DataTable you must use the DataTables API (specifically the row.add(), row().data() and row().remove() methods to add, edit and delete rows.

但是，您可以调用table.destroy() 在重新初始化之前销毁当前实例.关键是延迟重新初始化直到 $nextTick() 以便 Vue 可以刷新旧的 DataTables 的 DOM.这最好通过 suppliers 上的 watcher 来完成，因此当 fetchSuppliers() 中的变量更新时，DataTables 重新初始化会自动完成.

However, you can call table.destroy() to destroy the current instance before reinitializing it. The key is to delay the reinitialization until $nextTick() so that Vue can flush the DOM of the old DataTables. This is best done from a watcher on suppliers so that the DataTables reinitialization is done automatically when the variable is updated in fetchSuppliers().

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

演示

这篇关于Vuejs 和数据表:使用 v-for 填充数据时表为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！