I currently have a table that uses v-for to populate the data
<table v-for="(data, idx) in dataset" :key="idx">
</table>
Then, I have two buttons that insert or delete certain things in the database after which I would like to re-populate the table to reflect these new changes.
So far, the data is captured from an API that is called in the mounted lifecycle.
mounted: function (){
axios.get(....).then((response => {
this.dataset = response.data;
});
}
Hence, is it possible to re-call the mounted function to call the API and thus re-running the v-for?
You can just extract your loading logic into a method that can be called from multiple locations:
const Comp = {
methods: {
fetchData() {
axios.get(....).then(response => {
this.dataset = response.data;
});
},
onSomeOtherAction() {
// Do stuff.
this.fetchData();
},
},
mounted() {
this.fetchData();
},
}