Laravel Pusher推送通知异常：实时消息无法加入Vue组件数组

你的问题核心在于Pusher事件回调的this指向错误，以及响应式数据更新逻辑错误，导致新通知无法实时添加到Vue组件的messages数组中。

问题点拆解 #

1. 回调函数this指向偏离：用普通function作为Pusher事件回调时，this不再指向Vue组件实例，无法直接访问this.messages。
2. 无效的响应式更新：你创建了外部变量notification存储新通知，后续给这个变量添加数据的操作不会触发Vue的响应式更新，而且初始时把空数组push到this.messages的操作毫无意义。
3. 数组结构冲突：即使逻辑正确，this.messages.push(notification)会让messages变成二维数组，和页面初始化时的一维数组结构矛盾，导致渲染异常。

修复后的Vue组件代码 #

export default {
    template: `
        <div>
            <ul class="navbar-p prevent-close">
                <li v-for="message in messages" :key="message.id" class="dropdown-item d-block ">
                    <span>
                        <i class='bx bxs-low-vision'></i>
                    </span>
                    <p>{{ message.title }}</p>
                    <sup class="text-secondary">{{ message.description }}</sup>
                    <br />
                    <sup class="text-info">DT: {{ message.remindTime }}</sup>
                    <hr class="p-0 m-0" />
                </li>
            </ul>
        </div>
    `,

    data() {
        return {
            messages: [],
        }
    },
    
    mounted() {
        axios.get('/notifications').then(response => {
            this.messages = response.data.notifiy;
            $(".fa-bell").addClass('fa-notification-custom-badge');
        })

        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher('14eb3b08697886e4d41a', {
            cluster: 'eu'
        });

        var channel = pusher.subscribe('reminder-notification-chanel');
        // 使用箭头函数保持this指向Vue实例
        channel.bind('reminder-notification-event', (data) => {
            var dataOb = data.message;
            // 直接将新通知push到响应式数组messages中
            this.messages.push(dataOb);
            $(".fa-bell").addClass('fa-notification-custom-badge');
        });
    },
}

额外优化建议 #

1. 避免重复通知：push前可检查this.messages中是否已存在相同id的通知，防止CronJob重复触发事件导致消息重复。
2. Laravel事件校验：确保ReminderEvent类正确实现ShouldBroadcast接口，且广播的数据结构与前端预期一致。

内容的提问来源于stack exchange，提问作者Maison012