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

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/horizo​​n)(使用 laravel Horizo​​n 包并更新它的 layout.blade.php )，其中有两个 vue 实例，一个用于通知，另一个用于 Laravel/Horizo​​n，此请求不返回任何内容。

Answer 1

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

console.log() 失败的原因是它是在检索 post 请求之前执行的(这就是您收到观察者的原因)。

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

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