Vue.js和DataTables：使用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。最好通过观察者 o完成n 供应商，以便在 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()
    });
  }
},

演示

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