Vue Объект не обновляется с помощью ax ios 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 / horizon) (с использованием пакета laravel horizon и обновлении его layout.blade. php), где есть два экземпляра vue, один для уведомлений и другой для Laravel / Horizon, этот запрос ничего не возвращает .

Answer 1

Проблема, о которой упоминал @cbaconnier, заключается в том, что вы используете асинхронную функцию c и не ожидаете результата.

Ошибка console.log() связана с тем, что она выполнялась раньше запрос на публикацию получен (именно поэтому вы получаете наблюдателя).

То же самое происходит в вашем методе created.

попробуйте принять весь код, который зависит от полученных уведомлений, в .then() обратный вызов топора ios вызов.

Answer 2

Проблема заключалась в том, что я использовал bootstrap, поставляемый с используемой темой приложения, и когда я установил Horizon и обновил файл Horizon layout.blade.php в соответствии с моими настройками, он сломал этот кусок кода, потому что он использовал некоторые другая bootstrap версия и как только я удалил bootstrap с горизонта require('bootstrap'); в одном из app.js файлов, все работало нормально.