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

Question

[godyesnow]

Добрый день, ситуацию следующая, есть компонент с контентной частью, при переключении этот компонент меняется, в нем могут быть несколько дочерних компонентов. Собственно когда происходит смена компонента включается прелоадер, а вот как отследить момент когда все дочерние компоненты подгрузили данные (выполнились все ajax запросы) и отключить прелоадер когда все подгружено?

Comments

[alex]

Promise.all

[godyesnow]

Alex, Попробую так, спасибо большое!

Answer 1

[0xD34F]

Наверное, ваш дочерний компонент знает своё состояние - производится ли загрузка данных или нет. А значит, может сигнализировать об изменении своего состояния родителю - с помощью событий. А в родителе можно на эти события подписаться. Например (вместо ajax запросов тут генерация случайных чисел по таймауту, но думаю суть ясна).

Comments

[godyesnow]

Похоже то что нужно, большое спасибо вам!

Answer 2

[Олег]

Можно посылать событие 'ready' в родительский компонент после загрузки дочернего, если структура более сложная можно создать event bus.

Comments

[godyesnow]

Таким образом каждый дочерний компонент сгенерирует событие "ready", родительский их обработает, а как понять что этот компонент последний, что то вроде счетчика? Или я что-то не правильно понял?

[Олег]

godyesnow, ну это как вам удобней будет, можно сделать что-то типо этого:

data () {
    return {
        oneReady: false,
        twoReady: false,
    }
},

computed: {

    isReady () {
        return this.oneReady && this.twoReady
    },

},