Как узнать, когда все дочерние компоненты загружены в vue.js

У меня есть приложение vue.js, в котором есть несколько дочерних компонентов:

<main-app>
   <child-component></child-component>
   <child-component></child-component>
   <child-component></child-component>
...
</main>

Когда страница загружается, я могу использовать хук ready, чтобы узнать, что компоненты загружены. Теперь эти компоненты заполняются данными ajax, и их можно обновить вручную, нажав кнопку. Я могу получить данные от каждого дочернего компонента, используя методы broadcast и dispatch. Но я хочу показать пользователю предварительный загрузчик, когда он нажимает кнопку, и скрыть его, когда все запросы ajax будут завершены. Для этого мне нужно знать, что все дочерние компоненты завершены. Чего я не могу сделать последние 4-5 часов. Google и SO не очень помогли.

Я также пытался использовать jQuery ajaxStop, но, похоже, он не работает с vue-resource. Кто-нибудь может мне помочь, пожалуйста!


vue.js ajax vue-component vue-resource
person abhisek    schedule 22.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Однажды мне нужно было сделать что-то подобное, и что я в итоге сделал (кроме использования v-cloak для отображать приложение после завершения рендеринга vue) отслеживал, имеет ли каждая переменная require в data уже данные (или нет), и только затем «отображать» приложение (для этого я использовал внутренний флаг, чтобы контролировать, отображать ли приложение или загрузка сообщения).

Это было что-то похожее на это (используется underscore.js):

var app = new Vue({
    el: 'body',
    data: {
        data1: [],
        data2: [],
        data3: []
    },
    ready: function() {
        this.showApp();

        // Data 1
        $.getJSON('/path-to/data1', function(data) {
            app.$set('data1', data);
            app.showApp();
        });

        // Data 2
        $.getJSON('/path-to/data2', function(data) {
            app.$set('data2', data);
            app.showApp();
        });

        // Data 3
        $.getJSON('/path-to/data3', function(data) {
            app.$set('data3', data);
            app.showApp();
        });
    },
    methods: {
        showApp: function() {
            // Check if all data was loaded
            var requiredData = _.every(['data1', 'data2', 'data3'], function(el) {
                return _.size(this[el]) > 0;
            }, this);

            // If it was, enable the app
            if (requiredData) {
                $(this.$els.loading).hide();
                $(this.$els.app).fadeIn();
            }
        }
    }
});

Поскольку вы используете компоненты, вам придется использовать события для запуска метода showApp в основном приложении.

person Ever Daniel Barreto    schedule 22.05.2016
comment
Моя проблема в том, что у меня есть неизвестное количество дочерних компонентов внутри основного компонента. В вашем случае я вижу, что у вас есть три случая, я полагаю. Как я могу подойти в моем случае? - person abhisek; 23.05.2016
comment
Ну, похоже, вам придется проделать немного больше работы, возможно, вы можете зарегистрировать каждый компонент в основном приложении (через компонент ready), чтобы сообщить ему, что компонент загружает данные, а затем использовать события, чтобы сообщить основному приложению, что компонент готов? В основном приложении вы можете просмотреть зарегистрированные компоненты и проверить, завершена ли загрузка каждого компонента, а затем отобразить приложение. - person Ever Daniel Barreto; 23.05.2016
comment
Ницца! Я уже внес изменения, чтобы сообщить основному приложению, что дочерние компоненты загружают данные. Но как я могу узнать, что все дочерние компоненты закончили загрузку данных? Позвольте мне перефразировать: как узнать, что неизвестное количество дочерних компонентов завершило загрузку данных? Поскольку запросы ajax являются асинхронными, у меня нет возможности узнать об этом. (Все запросы срабатывают одновременно). - person abhisek; 23.05.2016
comment
Что ж, когда вы регистрируете компонент, начальным состоянием будет загрузка или любая другая логика, которая лучше всего подходит для вас, когда загрузка будет завершена, будет запущено событие, позволяющее основному приложению узнать, что загрузка завершена, в основном приложении вы проверяете каждое событие, если все компоненты скачиваются, имеет смысл? - person Ever Daniel Barreto; 23.05.2016
comment
Спасибо! Замечательно. У меня последний вопрос: как узнать, сколько дочерних компонентов? - person abhisek; 23.05.2016
comment
Когда вы регистрируете компонент, вы можете добавить их в массив в основном приложении, оттуда вы можете сделать component.length, чтобы узнать, сколько компонентов зарегистрировано в основном приложении. - person Ever Daniel Barreto; 23.05.2016
comment
Большое спасибо! Это именно то, что я хотел! - person abhisek; 23.05.2016