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 地平线包并更新它的 layout.blade.php ）上有两个 vue 实例，一个用于通知，另一个用于 Laravel/Horizo​​n，此请求不返回任何内容。

Answer 1

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

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

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

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

Answer 2

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