Laravel 和 Vue 在 Blade 中将数据从组件 1 发送到组件 2

Question

No idea if this is possible.

But here is the context.

I have a left navbar with a membership status(active/inactive). When the payment gateway receives the payment, a webhook is sent via Paddle(Laravel Paddle API).

During the webhook I am redirecting the user to a thank you page(blade with vue component).

app.js

let Event = new Vue();
window.Event = Event;

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 was hoping to catch this even in component 2 but nothing.....

Any idea what I am doing wrong? It is the first time I try to to this within blade.

I know both components are inside a PHP page, but I was hoping that perhaps Vue might still be able to communicate through the app.js somehow.

Thanks!

Answer 1

Might be a race condition where componentOne is emitting the event before componentTwo is mounted so it's not listening yet. Try moving your $on call to created() or even putting a timeout on the $emit. I might be misunderstanding your flow though.