Question

我需要帮助。我正在使用laravel，pusher和vuejs进行实时通知。我正在尝试通过叶片模板在props中传递两个参数，但它们始终是“未定义的”

刀片模板：

<notification :userid="{{$user->IdUsuario}}" :unreads="{{$user->unreadNotifications}}"></notification>

Vuejs：

import NotificationItem from './NotificationItem.vue';
export default {
    props: ['unreads', 'userid'],
    components: {NotificationItem},
    data() {
        return {
            unreadNotifications: this.unreads
        }
    },
    mounted() {
        console.log('Component mounted.');
    Echo.channel('App.User.' + this.userid)
    .listen('.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', function (e) {
        console.log(e);
        console.log(this.userid);
        let newUnreadNotifications = {
                    data: {
                        IdSalida: e.IdSalida,
                        empleado: e.empleado,
                        status: e.status
                    }
                };
            this.unreads.push(newUnreadNotifications);
    });

    }
}

我不知道我在做什么错:(救命！

Answer 1

如果要在功能中保留组件的上下文，则需要使用Arrow Functions。箭头函数没有自己的范围，它们继承父级的范围。就您而言，在箭头功能中，您仍然会有force引用该组件。

更改

this

到

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

您应该已定义了变量。

为了使代码井井有条，我将把回调函数放在组件中自己的方法中，并引用该函数。因此您的代码将变成这样：

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

laravel和vue上未定义的道具

1 个答案: