vue.js - Passing data across components in Vue

Question

I'm loading two components on a page on my Django project, one is used to query some data from my backend and another is used to load some forms.

Since the form component is loaded four times on the page (with different parameters) i can't query data from that component because i would make four queries (one for each component) while i only need to do one, so i decided to use one component to make the query, while the form component should only receive the data and show it on the page along with the form.

So i have this function in get_data.vue:

..
methods: {
    fetchBalance() {
          fetch('MY-BACKEND')
            .then(response => response.json())
            .then(data => {

              var freeBalance = data['freeBalance']
              var totalBalance = data['totalBalance']

            })
        },

    }
..

And then i have form.vue

<template>
...
</template>

<script>

export default {

  props:{

    order:{
      type:String, 
      default:'amount'
    },

    side:{
      type:String, 
      default:'price'
     },


  },

  mounted() {

  },

  data() {

      return {
        name: '',
        description: '',
        output: ''
      };
  },

  methods: {
      formSubmit() {
          let currentObj = this;
          axios.post('MY-BACKEND', {        
              price: this.price,
              amount: this.amount,
          }

          .then(function (response) {
            currentObj.output = response.data;
          }

          .catch(function (error) {
              currentObj.output = error;
          });
      },

  }
}

</script>

Somehow, i need to access the variablesfreeBalance and totalBalance in get_data.vue from form.vue. How can i do this? I was thinking of using Vuex, but i wanted to see if there was another way to do it without using Vuex, since it might be a bit overkill for this task.

Answer 1

Add those variables as props to your form.vue component (Note: I would rename this to something else as there already exists a <form> DOM object) and pass them in.

// MyForm.vue (renamed from form.vue to avoid conflict with the DOM object of the same name)

export default {

  props:{

    order:{
      type:String, 
      default:'amount'
    },

    side:{
      type:String, 
      default:'price'
     },

    freeBalance: {
      ...
    },

    totalBalance: {
      ...
    },
  },

// get_data.vue
<template>
  ...
  <my-form :free-balance="freeBalance" :total-balance="totalBalance" :order="..." :side="..."></my-form>
  ...
</template>

<script>
  ...
  data() {
    return {
      ...

      // define your variables here to make them available to the template
      freeBalance: null,
      totalBalance: null,
    }
  },
  methods: {
    fetchBalance() {
      fetch('MY-BACKEND')
        .then(response => response.json())
        .then(data => {
           this.freeBalance = data['freeBalance']
//         ^^^^^
           this.totalBalance = data['totalBalance']
//         ^^^^^

    }),
  },
}

Note the kebab-case of the prop names when you use them in your parent component's template.