Question

<template>
<div>

<div class="dropdown d-inline-block ml-2">
    <button type="button" class="btn btn-sm btn-dual" id="page-header-notifications-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-on:click="MarkAllAsRead($event)">
        <i class="si si-bell"></i>
        <span class="badge badge-danger badge-pill" v-if="CountUnread(notifications)">{{ CountUnread(notifications) }}</span>
    </button>
    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0 border-1 font-size-sm" aria-labelledby="page-header-notifications-dropdown">
        <div class="p-2 bg-primary text-center">
            <h5 class="dropdown-header text-uppercase text-white">Notifications</h5>
        </div>
        <ul class="nav-items mb-0"  style="overflow-y:scroll; height:500px;">
            <!-- notifications should have been updated by axios but they never appear -->
            <li v-for="notification of notifications">
               <div v-if="notification.length">
                    <notification v-bind:notification="notification[0]"></notification>
                </div>
                <div v-else>
                    <notification v-bind:notification="notification"></notification>
                </div>
            </li>
            <div class="p-2 border-top" v-if="hasMore">
                <a class="btn btn-sm btn-light btn-block text-center" href="javascript:void(0)" v-on:click="loadMoreNotifications($event)">
                    <i class="fa fa-fw fa-arrow-down mr-1"></i> Load More..
                </a>
            </div>
        </ul>
    </div>
</div>



</div>

</template>

<script>
    export default {
        props:[
        'user'
        ],
        data: function() {
            return{
                notificationsIndex:0,
                notifications:[],
                hasMore:1
            }
        },
        methods: {
            loadNotifications: function(){
                var data = {
                        index: this.notificationsIndex
                    };
                axios.post('/notifications/getAll',data).then( response => {
                    if(response.data){
                        if(this.notifications.length==0){
                            this.notifications=response.data;
                            console.log(this.notifications);//data fetched here successfully
                        }
                        else{
                            this.notifications.push.apply(this.notifications,response.data);
                        }
                    }
                    else{
                        this.hasMore = 0;
                    }
                });
                console.log(this.notifications);//couldn't find data, just observer object
            },
            loadMoreNotifications: function(event){
                event.preventDefault();
                this.notificationsIndex++;
                this.loadNotifications();
            },
            CountUnread: function(notifications){
                var count=0;
                for(var i=0;i<notifications.length;i++){
                    if(notifications[i].read_at == null){
                        count++;
                    }
                }
                return count;
            },
            HasNotification: function(notification){
                list = this.notifications.filter(item => {
                    return item.id == notification.id;
                });
                return list.length

            }
        },

        created: function(){
            this.loadNotifications();
            window.Echo.private('App.User.' + this.user.id)
                .notification((notification) => {
                    if(this.HasNotification){
                        this.notifications.unshift(notification);
                    }
                });
        }
    }
</script>

并且通知对象在html模板中也没有任何内容。

注意：同一代码在只有vue实例的所有页面上都能正常工作。在另一页面（localhost / horizon）上（使用laravel horizon软件包并更新它的layout.blade.php），其中有两个vue实例，一个用于通知，另一个用于Laravel / Horizon，该请求不返回任何内容。

Answer 1

@cbaconnier在这里提到的问题是您正在使用异步函数而不是在等待结果。

失败的console.log()是由于它是在检索发布请求之前执行的（这就是为什么您要接收观察者的事实）。

您的created方法中也会发生同样的情况。

尝试将所有依赖于接收到的通知的代码放入axios调用的.then()回调中。

Answer 2

这里的问题是，我正在使用我所使用的应用程序主题附带的引导程序，并且在根据我的自定义安装Horizon并更新Horizon layout.blade.php文件时，由于使用了一些代码，所以它破坏了这段代码其他引导程序版本，一旦我从其中一个require('bootstrap');文件的地平线app.js中删除了引导程序，一切正常。

Vue对象未使用axios POST请求更新

2 个答案: