How to emit data in Vue after api call is finished

Question

I have a windows.addEventListener that triggers an API call. I need to pass a name from the api call to the parent component to display it as a title on a dashboard. How can I emit the data to my parent component

child:

 

    async apiData() {
            const nodeData = this.dateRange
            ? await get('nodeData', {
                dateStart: this.dateRange[0],
                dateEnd: this.dateRange[1],
                nodeName: this.nodeName
            }) : await get('nodeData', {
                nodeName: this.nodeName
              });
            nodeData[0].name <-------- data to be emitted.
            this.tableLoading = false;

parent:

props: {
    title: String,
    cardListData: Array
  },

yoduh · Answer

https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events

The $emit() method is also available on the component instance as this.$emit():

so in your method:

this.$emit('emitName', nodeData[0].name)

Rohìt Jíndal · Answer

Here you go, You can emit the event to parent from child by using $emit function.

Vue.component('child', {
  props: ['childmsg'],
  template: '{{ childmsg }}',
  mounted() {
    // Just for the demo I am emiting the value directly but you can replace that with your API call code.
    const nodeData = [{
        name: 'Parent Header'
    }];
    this.$emit('headername', nodeData[0].name);
  }
});

var app = new Vue({
  el: '#app',
  data: {
    headerText: null
  },
  methods: {
    showName(e) {
      this.headerText = e;
    }
  }
});



  {{ headerText }}

How to emit data in Vue after api call is finished

2 Answers