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

Question

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

非常感谢!:)

这是模板:

<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:

<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();
    },
}

Answer 1

初始化后,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()
    });
  }
},

演示

Answer 2

我知道这有点晚了，但我今天才遇到这个问题，我唯一的解决方案是使用setTimeout函数。在使用获取数据后，axios我设置了一点延迟，然后init是数据表。通过这项工作， v-for 工作正常。

请参阅下面的我的代码。

GetDepartmentList(){
           axios.get('department')
                .then((response) => {

                    this.departmentList = response.data;
                    // this.dataTable.rows.add(response.data).draw();
                    setTimeout(() => $('#department-data-table').DataTable(), 1000);

                })
                .catch((error) => {
                    if (error.response.status == 401) {
                        alert('User session has expired. Please login again.');
                        location.replace("/login");
                    }
                });
        },

.rows.add()如果您想在不使用 v-for 的情况下在表中绘制行数据，也可以使用函数。请参阅此文档。