Bootstrap-Vue Table not updating with table.refresh()

Question

I have a table that should be changing its data constantly. When a button is clicked in the parent component, a call is made to the server and json file is then loaded into a child component(The table) through a prop.

Whenever a different button is clicked and the table needs to reload the data, it doesnt. I have tried doing:

this.$refs.dmTable.refreshTable();

and

this.$forceUpdate()

Rough structure of my code

Parent.vue

<template>
  <Button getData("this")>Get This Data</Button>
  <Button getData("that")>Get ThatData</Button>

  <MyTable v-if="showTable" :data="data" />
<template>

<script>
export default {
  data(){
    return{
      showTable:false,
      data: null
    }
  },
  methods:{
    getData(dataType){
      getDataFromServer(dataType).then(data =>{
        this.data = data.body
        this.showTable = true

      })    
    }
  }
}
</script>

MyTable.vue

<template>
  <b-table :items="data"><b-table/>
</template>

<script>
export default{
  props: ["data"]
}
</script>

If you click the first button, the data loads fine into the table. But if you then click the second button and try to load new data into the table nothing happens. I tried creating a method called updateTable() within the child component that contains this.$refs.myTable.update() but it does nothing.

Edit: One thing to note about this, the data that I am loading onto this table is quite large, 5mb json file.

The actual function that gets called:

    showTableView(model, type) {
      request
        .get(
          `/table_files/${this.folder_name}/${model}.json`
        )
        .then(response => {
          this.type = type;
          this.current_model = model;
          if (type === "joins") {
            this.tlorderData = response.body.fields.joins;
            this.show_joins_table = true;
            this.showTable = false;
            this.refreshTable()
            return false; // MAYBE RETURNING FALSE BREAKS THE RERENDERING?
          } 
          else if (type === "dimension_groups") {
            this.show_joins_table = false;
            this.showTable = true;
            this.tlorderData = response.body.fields.dimension_groups;
            this.refreshTable()
            return false;
          }
        })
        .catch(err => {
          this.response_error = err;
        });
    },

Answer 1

I don't see where you are defining data and showTable in your main app component.setting this.data to a value is not reactive (it is creating a non-reactive property on the app component).

Try this:

<template>
  <Button @click="getData('this')">Get This Data</Button>
  <Button @click="getData('that')">Get ThatData</Button>

  <MyTable v-if="showTable" :data="data" />
<template>

<script>
export default {
  data() {
    return {
      data: [],
      showTable: false
    }
  },
  methods:{
    getData(dataType){
      getDataFromServer(dataType).then(data =>{
        this.data = data.body
        this.showTable = true
      })    
    }
  }
}
</script>

The data() section will define data and showTable as reactive properties on your app/component instance.

Answer 2

The problem was in something that I did not mention in my code. The way I was loading in data into the table was like this:

<template>
  <b-table :items="reData"><b-table/>
</template>

<script>
export default{
  props: ["data"],
  data(){
    return{
      reData: this.data
    }
  }
}
</script>

This prevented my table from updating whenever data gets changed in the prop, note that I am passing in my prop to data() then passing THAT into my table. So the prop would change but the actual data that the table was showing would not.

Proper Way to pass in from props to table to prevent this from happening:

<template>
  <b-table :items="data"><b-table/>
</template>

<script>
export default{
  props: ["data"]
}
</script>