I am using Vue.js within a Laravel project and I am encountering an issue with the global event bus. I have created an event-bus.js file and imported it where needed. Although events are being generated upon clicking, there seems to be no reactions from the listener. Despite trying various solutions over the past 3 days, nothing seems to work. Any help would be greatly appreciated.
Initially, I attempted to create an eventBus in app.js but that did not resolve the problem either.
Here is a snippet of my EditDiscountComponent:
import { EventBus } from "../../../event-bus";
editDiscount () {
const data = {
discount_id: this.discountData.discount_id,
status: this.discountData.status,
type: this.discountData.type,
percentage:this.discountData.percentage,
amount:this.discountData.amount,
};
EventBus.$emit('update-discount', data);
this.languages.forEach(lang => {
if (lang.code && this.discountData[lang.code] !== undefined) {
data[lang.code] = this.discountData[lang.code];
}
});
this.$store.dispatch(actions.EDIT_DISCOUNT, data)
.then(res => {
if (res && res.data.status) {
// window.location.href = '/admin/discounts';
} else {
this.$store.commit(mutations.SET_SNACKBAR_SHOW, true);
this.$store.commit(mutations.SET_SNACKBAR_TEXT, res.data.message);
}
}).catch(console.error);
},
},
And here is a snippet from my ProductComponent:
import { EventBus } from "../../../event-bus";
mounted() {
EventBus.$on('update-discount', ($data) => {
console.log($data);
});
this.getCategories();
this.getProducts();
},
Despite attempting different ways to use the callback function, the desired results were not achieved. The event listener was also tried within the mounted() hook without success.