API调用后实例化JS插件

Question

我使用https://datatables.net/manual/installation中的Bootstrap / JS Datatables插件来允许用户管理表的内容。

但是，插件只需要在我进行API调用后进行实例化，该调用将为表提取必要的行。

我使用Vue.js组件和Axios来实现这一目标。

这是我的Vue组件。

<template>
<div>

    <table id="bakery-orders" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="bakery-orders-info">
        <thead>
            <tr role="row">
                <th>Order#</th>
                <th>Customer</th>
                <th>QTY</th>
                <th>Product</th>
                <th>Variations</th>
                <th>Timeslot</th>
                <th>Transport</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr role="row" v-for="variationOrder in variationOrders">
                <td class="sorting_1">{{ variationOrder.order_id }}</td>
                <td>{{ variationOrder.customer_name }}</td>
                <td>{{ variationOrder.qty }}</td>
                <td>{{ variationOrder.product_name }}</td>
                <td>  
                    <p v-for="variation in JSON.parse(variationOrder.variation)">{{ variation.key }} <strong>{{ variation.value }}</strong></p>   
                </td>
                <td>A</td>
                <td>
                    <p v-if="variationOrder.store_id">Pickup</p>
                    <p v-else>Transport</p>
                </td>
                <td>
                    <a class="btn btn-app">
                        <i class="fa fa-check"></i> Done
                    </a>
                    <a class="btn btn-app">
                        <i class="fa fa-close"></i> Cancel
                    </a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th rowspan="1" colspan="1">Order#</th>
                <th rowspan="1" colspan="1">Customer</th>
                <th rowspan="1" colspan="1">QTY</th>
                <th rowspan="1" colspan="1">Product</th>
                <th rowspan="1" colspan="1">Variations</th>
                <th rowspan="1" colspan="1">Timeslot</th>
                <th rowspan="1" colspan="1">Transport</th>
                <th rowspan="1" colspan="1">Actions</th>
            </tr>
        </tfoot>
    </table>

</div>
</template>

<script>
    export default {
        data: function() {
            return {
                variationOrders: [],
            }
        },
        methods: {
            getTotals: function() {
                var self = this;
                axios.get('/api/v1/order_variations')
                .then(function (response) {
                    self.variationOrders = response.data.order_variations;
                    jQuery('#bakery-orders').DataTable();
                    jQuery('table').tableExport({
                        formats: ['csv'],
                    });
                    //console.log(response.data.order_variations);
                })
                .catch(function(error) {
                    //
                });
            },
        },
        mounted: function() {
            this.getTotals();
            // call the API every 30 seconds to fetch new orders
            setInterval(function () {
                this.getTotals();
            }.bind(this), 5000); 
        }
    }
</script>

负责插件实例化的代码是

jQuery('#bakery-orders').DataTable();

只要成功调用API，此代码就会立即运行。

我也试过这个

window.getElementById('bakery-orders').DataTable();

无济于事。

我在控制台中也没有出错。该插件似乎根本没有实例化。