Vue.js Update Vue Js table after one row was added

Vue.js Update Vue Js table after one row was added,vue.js,bootstrap-vue,vue-reactivity,Vue.js,Bootstrap Vue,Vue Reactivity,I try to update table after one new row is added. Now it works to add a new row but I must refresh the page to see the new one. The same issue I have the the update/delete method, but there I will find a way after. getCustomers() { let url = `/customers`; const p = axios .get(url); return p.then(response => { const i = response.data.data; return i || []; }); }, addCustomer() { let newCustomer = { customer_name: this.customer_name };

I try to update table after one new row is added. Now it works to add a new row but I must refresh the page to see the new one. The same issue I have the the update/delete method, but there I will find a way after.

getCustomers() {
    let url = `/customers`;
    const p = axios
        .get(url);
    return p.then(response => {
        const i = response.data.data;
        return i || [];
    });
},

addCustomer() {
    let newCustomer = {
        customer_name: this.customer_name
    };
    axios
        .post("/customers", newCustomer)
        .then(response => {
            this.items = response.data;
            this.$nextTick(() => {
                this.$refs.modal.hide();
                this.items.customer_name = response.data.customer_name;
        });
    })
    .catch(e => {
        console.log(e);
    });
}

data() {
    return {
      items: [],
      ....
      ....
    }
}

<b-table
    show-empty
    stacked="md"
    :items="getCustomers"
    :fields="fields"
    :current-page="currentPage"
    :per-page="perPage"
    :filter="filter"
>

This works for update

this.$nextTick(() => {
    for(let item of this.items){
       if(parseInt(item.id) === parseInt(id)) {
          item.customer_name = response.data.customer_name;
          this.resetModal();
       }
     }           
});

#1

Please see my comments in code below:

getCustomers() {
    let url = `/customers`;
    const p = axios
        .get(url);
    this.customers = p.then(response => {
        const i = response.data.data;
        return i || [];
    });
},

addCustomer() {
    let newCustomer = {
        customer_name: this.customer_name
    };
    axios
        .post("/customers", newCustomer)
        .then(response => {
            this.items = response.data;
            this.$nextTick(() => {
                this.$refs.modal.hide();
                this.items.customer_name = response.data.customer_name;
                this.customers.push(response.data) // something like this can help
        });
    })
    .catch(e => {
        console.log(e);
    });
}

data() {
    return {
      items: [],
      customers: [] // add this to make reactive
    }
} 
mounted() {
  this.getCustomers(); // run the function when page/component mounted
}

<b-table
    show-empty
    stacked="md"
    :items="customers"
    :fields="fields"
    :current-page="currentPage"
    :per-page="perPage"
    :filter="filter"
>

#2

I find a way to re-render data from table.

Add v-if="renderComponent" to < b-table >

data() {
  return {
    renderComponent: true,
  };
},

Create a new method:

forceRerender() {
    this.renderComponent = false;
    this.$nextTick(() => {
        this.renderComponent = true;
    });
}

And I use forceRerender(); after my event, and it works.


#3

I get the same error as before. I am using pagination,and I get an error on Cannot read property 'currentPage' of undefined". I will do more debugging.