javascript – When event triggered and page listen to event. The vue data in div will update (Laravel6 & VueJs)-ThrowExceptions

Exception or error:

What I am making is a Queueing System that you usually see in the bank, hospital or any department with queue lines.

What I to do is when I press a button on the dashboard page, My other page(display page) will update its data.

Im trying to make it via Broadcast and listener but I cant make it work.

This is my controller for triggering the event while I press a button

 public function callqueue(Request $request)

{
    $request->validate([
        'called'=>['max:255'],
        'counter'=>['max:255']
    ]);

    $dept=Auth::user()->department;
    Queue::where([
        ['department',$dept],
        ['called', 'no']
        ])
                   ->whereDate('created_at', Carbon::today())
                   ->orderBy('id', 'asc')
                   ->first()
                   ->update(['called'=>$request->called,'counter'=>$request->counter]);


                   event(new NewQueue());

                   return redirect('admin')->withStatus(__('Queue has been called.'));

}

This is my Event (NewQueue)

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Queue;

class NewQueue implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;


/**
 * Create a new event instance.
 *
 * @return void
 */
public function __construct()
{

}

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

This is my script on the other page(Display page)

 const app1 = new Vue({
            el:'#queue',
            data:{
                queue:{},
                isLoading: false,
                isError: false

            },
            mounted(){
                this.getQueue();
                this.listen();
            },
            methods:{
                getQueue(){
                    this.isLoading = true;
                    this.isError = false
                    axios.get('api/display/showqueue')
                    .then((response)=>{
                        this.queue=response.data
                        this.isLoading = false
                    })

                    .catch(function (error){
                        console.log(error);
                        this.isLoading = false
                        this.isError = true
                    });
                },
                listen(){
                    Echo.channel('queues')
                    this.$forceUpdate();

                }
            }

        })

How can I make it happen that when I press a button on my dashboard page(the one with the callqueue function that will trigger event(new NewQueue()); ) will refresh or update the data on the div in my display page?

I hope someone can help me. Thanks!

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *