如何在 Laravel vuejs 中用新数据刷新数据表？答案

【问题标题】：How to refresh datatables with new data in Laravel vuejs?如何在 Laravel vuejs 中用新数据刷新数据表？
【发布时间】：2021-04-16 01:39:44
【问题描述】：

我在 vue js 中使用数据表 1.10.19。 .如何将新数据插入数据库后刷新表？我使用了 clear、destroy 和 draw 但没有任何效果。这是我的整个代码。在页面刷新之前，数据不会加载到数据表中

 table() {    this.$nextTick(() => {
                        $('#sampleTable').DataTable();
                       })
                       },
                     get() {
                       axios.get('api/user').then(res => {
                        this.users = res.data
                        // console.log("after: " + this.users);
                        this.table()
                        });
                     axios.get("api/getRoles").then(({
                           data
                        }) => (this.roles = data));
                        // if (refreshIt == true) {
                            
                            // this.retable();
                        // } else {
                            
                           this.table();
                           
                        // }
        
                    $(".selectpicker").selectpicker();
                },
                  create() {
                                    // this.validation();
                    this.form.post('api/user').then(() => {
                            $("#addnew").modal("hide");
                            toast.fire({
                                icon: "success",
                                type: "success",
                                title: "Information Created Successfully!"
                            });
                             Fire.$emit("refreshPage");
                            this.form.reset();
                            
                        })
                        .catch(er => {
                            console.log(er);
                        });
                 created() {
                // we call the show function here to be executed
                        this.get();
                
                Fire.$on("refreshPage", () => {
              
                  this.get();
                
               
            });}

【问题讨论】：

标签： vue.js

【解决方案1】：

我在创建函数 $('#sampleTable').DataTable().destroy(); 中找到了销毁数据表的解决方案；然后像下面这样创建它

  create() {

    this.form.post('api/user').then(() => {
    $("#addnew").modal("hide");
    toast.fire({
    icon: "success",
    type: "success",
    title: "Information Created Successfully!"
    });
    $('#sampleTable').DataTable().destroy();// here I destroyed the table 
    Fire.$emit("refreshPage");// here I recreated the table
    this.form.reset();
    })
    .catch(er => {
    console.log(er);
    });
},

【讨论】：