CODEWITHSUNDEEP
javascriptvue.js
Tadas Stasiulionis
Tadas Stasiulionis

Reputation: 1316

Vue.js eventBus doesn't emit property after page refresh

I want to pass property from one component to other, they are siblings, after a page refresh. I want to do this on the page load. I am using eventBus to do it:

EventBus.$emit('generatedSum', this.sum);

Receiving it in the sibling component with:

EventBus.$on('generatedSum', (sum) => {
      this.correct = sum;
    });

and I am puting both in the lifecycle hook:

created(){}

The problem is that after code is compiled after a saved change, I get the property emited to the sibling component, but when I manualy refresh the page the property is not visible in the sibling component.

Upvotes: 4

Views: 1981

Answers (1)

Thusitha
Thusitha

Reputation: 3511

I think when the page refreshes the Vue components mount one after another. Since both are siblings, when the first component trigger the event the second component may not be available to listen to the triggered event. Because the second component is mounted after the first component.

As a work around try mounted() rather than using created() life cycle event.

More on life cycle events can be found here. https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Upvotes: 6

Related Questions