Vue.js 使用VueJs的JQuery数据表中没有可用数据问题

我正在使用C#和Vue Js开发一个系统，我需要在表中显示一些数据，因为我使用了JQuery数据表。 在我的例子中，所有的数据和选项（搜索和分页）都显示出来了，但问题是表的顶行显示为“表中没有可用的数据”如果我们强制（Ctrl+F5）刷新，那么表工作得很好

注意：我在stack overflow中搜索了有关此问题的信息，并尝试了一些相关问题，但我无法解决。 请帮我解决这个问题

1） 在第一页加载之后，表如下所示

注意：如果我在搜索栏中搜索某个内容，所有数据都不会显示

2） 强制刷新后，表显示为这样，工作正常

这是我用于实现的代码

Vue组件

 Vue.component('all-enquiry', {
    template: ' <table id="allenquiry" class="table table-striped table-bordered" cellspacing="0" style="width:100% !important"><thead><tr><th>Date<small>/Time</small></th><th>Hndle.By</th><th>Ref:No</th><th>Name</th><th>Destination</th><th>Dep.Date</th><th>Ret.Date</th><th>Airline</th><th>Status</th><th class="disabled-sorting text-right">Actions</th></tr></thead><tbody class="tbody-text"><tr v-for="enq in enquiryall"><td>{{ enq.CreatedDate | formatDate }}</td><td>{{ enq.HandleBy }}</td><td>{{ enq.EnqRefno }}</td><th>{{ enq.PaxName }}</th><td>{{ enq.DepartingTo }}</td><td>{{ enq.DepartingDate }}</td><td>{{ enq.ReturnDate }}</td><td>{{ enq.Airline }}</td><td><button class="btn btn-info btn-sm btn-round">Following Up</button></td><td class="text-right"><button class="btn btn-success btn-sm btn-round">More Info</button></td></tr></tbody></table >',
    data() {
        return {
            enquiryall: '',
        }
    },
    created: function () {      
        this.getall();
    },
    methods: {
        getall: function () {
            var enquiryform = this
            axios.get("/Main/getAllenq/").then(function (response) {
                enquiryform.enquiryall = response.data.allenquiry;

            });


        }
    }
});

Html

---

初始化数据表时，可能您的ajax请求没有完成。在组件中创建另一个方法来初始化数据表。例如：

initDt（）{}

由于

nextTick（）

的原因，它将在表渲染完成时初始化数据表

代码未测试，它的作用域应该有问题，我使用的是arrow（）=>{}函数而不是function（）

$(document).ready(function () {
    $('#allenquiry').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search records",
        }

    });   
});

<div class="card-body">
    <div class="toolbar">
    </div>
    <all-enquiry></all-enquiry>
</div>

Vue.component('all-enquiry', {
    template: '...',
    data() {
        return {
            enquiryall: '',
        }
    },
    created: function () {      
        this.getall();
    },
    methods: {
        getall: function () {
            var enquiryform = this
            axios.get("/Main/getAllenq/").then(function (response) {
                enquiryform.enquiryall = response.data.allenquiry;
                enquiryform.$nextTick(function() {
                    enquiryform.initDt()
                });
            });
        },
        initDt() {
            $('#allenquiry').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "All"]
                ],
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                }
            });    
        }
    }
});