Vuejs and datatables: table empty when using v-for to fill data

Question

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

thanks a lot! :)

here's the template:

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

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

Answer 1

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

Q. I append a row to the table using DOM/jQuery, but it is removed on redraw.

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.

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

demo

Answer 2

I know this is a bit late answer but I just encountered this problem just today and my only solution for this issue is using setTimeout function.After fetching data using axios I set a bit of delay then init the data-table. With this work around v-for works fine.

See below for my code.

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

Also you can use .rows.add() function if you want to draw row data in the table without using v-for of vue. Refer to this doc.