datatables - Vuejs Ajax 调用和数据表

Question

我正在为我的一个项目使用 Vuejs 和 dataTable。我进行 Ajax 调用并将数据推送到数组中。之后我使用 v-for 循环 <tr> 中的数据标签。大多数时候它不起作用。页面加载完成后，表格立即加载.. 接收 ajax 数据需要一些时间。这是输出。它说表中没有可用数据

所以搜索选项不能正常工作。我想在一段时间后使用 setTimeout 函数(这是一个坏主意)来加载表。什么是正确的方法呢？分享代码:

    new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    phone: response.data[i].user.phone,
                                    email: response.data[i].user.email,
                                    courseId: response.data[i].course.id,
                                    courseName: response.data[i].course.course_title,
                                    expiryDate: response.data[i].expiry_date,
                                    shares: response.data[i].number_of_shares,
                                    expired: (response.data[i].expired == 1),
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        })
                    },
                },
                mounted(){
                    this.getData();
                },
            });
//data table
$(function () {
            setTimeout(()=> {          
                $("#temp-enroll").DataTable({
                    "paging": true,
                    "ordering": false,
                    "info": true,
                    "autoWidth": false
                });
            },1000);
        });

在 Blade 中:

Answer 1

好的，我尝试了这个，并且完全按照我想要的方式工作。谢谢大家的支持。

new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    ............................
                                    ......................
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        }).then(()=>{
                          $("#temp-enroll").DataTable({
                            "paging": true,
                            "ordering": false,
                            "info": true,
                            "autoWidth": false
                             });
                          });
                    },
                },
                mounted(){
                    this.getData();
                },
            });