Vue.js global event issue

Question

Vue.js global event issue

Recently, I encountered an issue with the following code:

<component-one></component-one>
<component-two></component-two>
<component-three></component-three>

Specifically, component-two contains component-three.

My current setup involves emitting an event in <component-one> that needs to be caught in <component-three>.

In <component-one>, I emit the event like this:

this.$bus.$emit('setSecondBanner', finalBanner);

Then, in <component-three>, I attempt to catch it:

mounted() {
    this.$bus.$on('setSecondBanner', (banner) => {
        alert('Caught');
        this.banner = banner;
    });
},

However, the event is not being caught as expected.

The event bus is defined in my core.js file as follows:

let eventBus = new Vue();

Object.defineProperties(Vue.prototype, {
    $bus: {
        get: () => { return eventBus; }
    }
});

Upon inspecting vue-dev-tools, I confirm that the event has indeed been fired. So, what could be causing the issue?

javascript vue.js

Answer 1

Answer №1

This is a demonstration of how Vue1 works.

Object.defineProperty(Vue.prototype, '$bus', {
get() {
return this.$root.bus;
}
});

Vue.component('third', {
template: `<div> Third : {{ data }} </div>`,
  props:['data']
});

Vue.component('second', {
template: `<div>Second component <third :data="data"></third></div>`,
ready() {
this.$bus.$on('setSecondBanner', (event) => {
this.data = event.data;
});
},
data() {
return {
    data: 'Default value in second'
    }
}
});

Vue.component('first', {
template: `<div>{{ data }}</div>`,
ready() {
setInterval(() => {
this.$bus.$emit('setSecondBanner', {
data: 'Bus sending some data : '+new Date(),
});
}, 1000);
},

data() {
return {
    data: 'Default value in first'
    }
}
});

var bus = new Vue({});
new Vue({
el: '#app',
data: {
bus: bus
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
<div id="app">
  <second></second>
  <first></first>
</div>

Answer 2

This is a demonstration of how Vue1 works.

Object.defineProperty(Vue.prototype, '$bus', {
get() {
return this.$root.bus;
}
});

Vue.component('third', {
template: `<div> Third : {{ data }} </div>`,
  props:['data']
});

Vue.component('second', {
template: `<div>Second component <third :data="data"></third></div>`,
ready() {
this.$bus.$on('setSecondBanner', (event) => {
this.data = event.data;
});
},
data() {
return {
    data: 'Default value in second'
    }
}
});

Vue.component('first', {
template: `<div>{{ data }}</div>`,
ready() {
setInterval(() => {
this.$bus.$emit('setSecondBanner', {
data: 'Bus sending some data : '+new Date(),
});
}, 1000);
},

data() {
return {
    data: 'Default value in first'
    }
}
});

var bus = new Vue({});
new Vue({
el: '#app',
data: {
bus: bus
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
<div id="app">
  <second></second>
  <first></first>
</div>

Answer 3

Answer №2

Did you attempt to initialize the listener in the created hook instead of the mounted hook?

Additionally, what's the reason for creating the bus with defineProperties rather than just using:

Vue.prototype.$bus = new Vue();

Answer 4

Did you attempt to initialize the listener in the created hook instead of the mounted hook?

Additionally, what's the reason for creating the bus with defineProperties rather than just using:

Vue.prototype.$bus = new Vue();

Vue.js global event issue

Answer №1

Answer №2

Similar questions

What are the steps for adding a JSON file to a GitHub repository?

Angular ng-repeat not populating the list properly, causing a collapse not to display

The Dockerfile for Next13 is unable to locate the server.js file

Is there a way to transfer the chosen maximum and minimum price values to a JavaScript function within a select tag in HTML?

Creating an error handler in PHP for dynamically adding or removing input fields is a crucial step in ensuring smooth and

How to Retrieve the Value from Bulma Datepicker in Vue.js

Having difficulty installing the yarn package from GitHub

What could be causing my select tags to appear incorrectly in Firefox and IE?

What is the best way to perform an AJAX request on Hackerrank using JavaScript?

Upon importing Chakra-UI in NextJS, the functionality may not work right away

The PHP function is returning an undefined value in JavaScript

Updating the authentication code in passport.js

Decrease the height of a div element from the top with the use of jQuery

Creating one div to initiate the contents to fadeToggle and another div to cease the fadeToggle animation utilizing the setInterval function in JavaScript

Playing with Data in AG-Grid using Javascript

Having trouble fetching JSON data from a URL in my React Native project, the response is not as expected

Starting a line series from the beginning of the y-axis on a bar chart using chart.js

elevate the div with a floating effect

Is it possible to execute user-defined functions dynamically in a Node.js application without having to restart the server

The order of key:value pairs in documents created by Mongoose does not always align with the schema