javascriptvue.jsbootstrap-vue

How do I update the items async in a b-table from Bootstrap-Vue reusing the items provider function?

I am using Bootstrap-Vue v2.0.0-rc.11 and I just cannot get my head around how to update the table content. I am sure it is trivial.

I am pulling my content from a backend using an item provider function.

        <b-table
                 :items="myProvider"
        >

The initial call works just fine with the following method.

export default {
    methods: {
        myProvider(ctx) {
            let promise = axios.get('/backend?currentPage=' + ctx.currentPage);

            return promise.then((response) => {
                return(response.items || []);
            });
        },

To duplicate a row item I open a modal to enter a new name. I make a backend call for the duplication which works well. Now I want to refresh the content displayed in the table showing the new item. How do I do this?

The easiest I can think of would be to call the item provider function (here: 'myProvider') again. I can do this from the modal but I cannot provide the correct parameter (here: 'ctx').

Is there an event to trigger/emit to reissue the backend call?

I tried things like :

this.$refs.nameOfTable.$forceUpdate()

this.$refs.nameOfTable.$emit('XXX') // XXX = placeholder for various events

Any hint is appreciated! Thank you.

Solution

  • It's hidden in the docs, but it's just a simple refresh() call on the table reference.

    <b-table ref="table" ... ></b-table>
this.$refs.table.refresh();

    From the Force refreshing of table data section of the docs.