Vuejs Ajax调用和dataTable [英] Vuejs Ajax call and dataTable

问题描述

我正在为我的项目之一使用Vuejs和dataTable.我进行Ajax调用并将数据推入数组.之后，我使用v-for循环< tr> 标记中的数据.在大多数情况下，它不起作用.该表将在页面完成加载后立即加载..接收ajax数据需要花费一些时间.这是输出.它说表

I'm using Vuejs and dataTable for one of my project. I make an Ajax call and push data into an array. After that I use v-for to loop the data in the <tr> tag. Most of the time it doesn't work. The table loads as soon as the page has finished loading.. it takes a bit of time to receive the ajax data. Here is the output. It says no data available in the table

因此serch选项无法正常工作.我以为使用setTimeout函数(这是一个坏主意)，要在一段时间后加载表.正确的做法是什么?共享代码:

So the serch option doesn't work properly. I thought to use a setTimeout function (which was a bad idea) to load the table after a bit of time. What would be the proper way to do it? Sharing the code :

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

在刀片中:

推荐答案

好吧，我尝试了一下，并按照我想要的方式工作.谢谢大家的支持.

Ok I tried this and working exactly what I have wanted. Thanks everyone for supporting.

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

这篇关于Vuejs Ajax调用和dataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！