13

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.

OpenHaus
  • 815
  • 2
  • 9
  • 16

1 Answers1

21

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.

nardnob
  • 840
  • 13
  • 23
  • 1
    `this.$refs` is undefined – BuddyZ Apr 21 '20 at 19:11
  • @BuddyZ the scope in an asynchronous call is different and therefore you don't have direct access to `this`. You can bind it like ```javascript fetch("url") .then(function(data) { // your code }.bind(this)); ``` – Tarol Jan 08 '21 at 05:52
  • Thanks @Tarol. I had no idea why this.$refs would be undefined. – nardnob Jan 09 '21 at 19:32