VueJS - How can i refresh a table component from another component?

Question

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!

Answer 1

Seems like you have a problem with your context in the then function

formSubmit(e) {
  e.preventDefault();
  console.log('Called fetchData!')
  let currentObj = this;
  axios.post('MYURL', {
    'add_data': data, 
  })
    .then((response) => {
      this.fetchData()
      currentObj.output = response.data;
    })
    .catch(function (error) {
      currentObj.output = error;
    });
}

You can either use an arrow function as shown above to call this.fetchData

Or you can use bind

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;
    }.bind(this))
    .catch(function (error) {
      currentObj.output = error;
    });
}