RossUK
130
2
Vue

Display Laravel Echo Pusher event values in Vue component

Posted 7 months ago by RossUK

I have been following the series

https://laracasts.com/series/get-real-with-laravel-echo

in the example Jeffery passes an array to the view component I have tried reading the docs but can't quite figure out how to update single values for example a label or text box. In this example the Msg value between the p tags.

here is my vue component

<template>
<div>
        <div class="callout callout">
                <p>{{ msg }}</p>
        </div>
</div>
</template>

<script>
     export default {},
     created() {
     window.Echo.channel('progressBar').listen('UpdateProgressData', {{ message }} => {
     msg = message;
     })
     }
</script>

And here is my event. I have see the event values in the chrome js console

public $progress;
    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($progress, $message)
    {
         $this->progress = $progress;
         $this->message = $message;
    }

    
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('progressBar');
    }

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.