I have two Vue components: one is a form and another is a table, they are in the same page. I want to refresh the table with new values when the form is submitted.
In order to do this, i need to call the function that fetches data and shows it on the table from the form component, so i need to call a function across two different components, which i did and it works.
The problem is that while i can call the function in the other component from the form component, the table doesn't refresh with new values, how can i fix this?
Here is my code:
the form component:
<template>
...
</template>
<script>
import axios from 'axios'
export default {
props:{
order:{
type:String,
default:'data'
},
},
mounted() {
console.log('Component mounted.')
},
data() {
return {
name: '',
description: '',
output: ''
};
},
methods: {
formSubmit(e) {
e.preventDefault();
console.log('Called fetchData!')
let currentObj = this;
axios.post('MYURL', {
'add_data': data,
})
.then(function (response) {
this.fetchData()
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
}
fetchData: function(){
this.$root.$emit('table_component')
},
}
}
</script>
The table component:
<template>
<v-data-table
:headers="headers"
:items="customers"
:items-per-page="5"
:hide-default-footer="true"
class="elevation-1"
>
</v-data-table>
</v-container>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
search: '',
headers: [
{ text: 'Name', value: 'Name' },
{ text: 'Item', value: 'Item' },
],
customers: [],
}
},
mounted() {
this.fetchData()
this.$root.$on('table_component', () => {
this.fetchData()
},
},
methods: {
fetchData() {
fetch('MYURL')
.then(response => response.json())
.then(data => {
console.log(data)
this.customers = data;
})
},
}
}
</script>
Here is what i'm doing in this code: when the form is submitted and the response is received, i call the function fetchData(). The function is called because i see the console.log('Called fetchData!') being fired, so that works, the only thing that doesn't work is that the table doesn't refresh with new values. Any advice is appreciated!
