[Vuejs]-Props undefined on laravel and vue

by

0👍

✅

if you want to keep the context of the component within your function, you need to use Arrow Functions. Arrow functions don’t have their own scope, they inherit the scope of the parent. In your case, in an arrow function you would still have this referring to the component.

Change

.listen('.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', function (e) {

to

.listen('.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated',(e) => {

and you should have the variables defined.

To keep your code organized, I would put the callback into its own method within the component and reference that function.
So your code would become something like this:

mounted() {
    console.log('Component mounted.');
    Echo.channel('App.User.' + this.userid)
       .listen('.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', this.notificationListener);
},

methods: {
    notificationListener(e) {
        console.log(e);
        console.log(this.userid);
        let newUnreadNotifications = {
            data: {
               IdSalida: e.IdSalida,
               empleado: e.empleado,
               status: e.status
            }
        };
        this.unreads.push(newUnreadNotifications);
    }
}

Leave a comment