[Vuejs]-Broadcasted Laravel notification is not shown in real-time on frontend, but is sent over Pusher and shown in console

by

0👍

✅

I had a mix(‘js/app.js’) script which I had included in my app.blade.php and this caused the problem. After removing it, everything was working and the newUnreadNotifications was being updated asynchronously.

<script src="{{mix('js/app.js')}}"></script>

0👍

I’m not sure how you have written the code in the <notification-item/> component. because, when you receive a new notification from the pusher channel, it will be pushed to the newUnreadNotifications array as you expected like below.

var newUnreadNotifications = {data: {patient: notification.patient, user: notification.user}};
this.unreadNotifications.push(newUnreadNotifications);

That’s why you can get a result for console.log(newUnreadNotifications)

But, you have to make sure you are reading the array keys & objects correctly. As I can see now, you are wrapping the patient and user with a data object.

Therefore, inside the <notification-item/> component you should access patient and user like the below example.

let patientName = data.patient.name;

Leave a comment