I am facing an issue with a table that is supposed to be updating its data dynamically. The scenario is such that when a button is clicked in the parent component, a server call is triggered and a JSON file is loaded into a child component (the table) via a prop.
However, whenever another button is clicked to reload the data in the table, it does not reflect the changes. I have attempted methods like:
this.$refs.dmTable.refreshTable();and
this.$forceUpdate()
The basic structure of my code is as follows:
Parent.vue
<template>
<Button getData("this")>Get This Data</Button>
<Button getData("that")>Get That Data</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>
When clicking the first button, the data loads correctly into the table. However, if the second button is clicked to load new data, nothing happens. I even tried creating a method called updateTable() within the child component with this.$refs.myTable.update(), but it yielded no results.
Edit: It's worth mentioning that the data being loaded into this table is quite extensive, a 5MB JSON file.
The actual function being executed:
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;
});
},