Is it possible to achieve this task?
Here is the scenario:
I have a left navbar displaying membership status (active/inactive). Once the payment gateway receives the payment, a webhook is triggered via Paddle(Laravel Paddle API).
During the webhook process, I redirect the user to a thank you page created with a blade containing a Vue component.
In app.js:
let Event = new Vue();
window.Event = Event;
In navbar.blade.php:
<componentOne></componentOne>
<componentTwo></componentTwo>
ComponentOne:
mounted(){
Event.$emit("updateStatus");
},
ComponentTwo:
mounted() {
this.fetchStatus();
Event.$on("updateStatus", () => {
setTimeout(() => {
console.log('testing!');
}, 4000);
})
},
I expected to receive this event in Component2, but nothing happened...
Any suggestions on what might be going wrong? This is my first attempt using blade for this purpose.
Although both components are embedded within a PHP file, I was hopeful that Vue could still communicate through app.js somehow.
Thank you!