Есть ли событие при подключении компонента, в котором асинхронные данные гарантированно будут присутствовать?

Question

[photosho]

Делаю сайт на Nuxt 3 и Vue. Получаю данные с сервера (асинхронно), а в шаблоне через "v-if" подключаю компонент с полосой прогресса, и в "v-else" - компонент, выводящий данные, которые получаю с сервера. После получения данных выставляю флаг "success" - этот флаг и использую в условии "v-if":

<loading v-if="!success"/>
<mycomp v-else :articles="articles"/>

Внутри компонента "mycomp" обрабатываю полученные данные в функции "mounted" и получаю ошибку. Оказывается, компонент вызывается дважды - первый раз до срабатывания асинхронной функции и второй - после, когда данные уже получены. То есть, при первом вызове компонента параметр "articles" равен "undefined", и только при втором вызове он заполнен.

Сейчас проблему решил так: в "mounted" проверяю на "undefined" и только потом выполняю действия.

Вопрос: правильно ли такое поведение или я что-то не учёл? Возможно, есть какое-то другое событие кроме "mounted", в котором данные уже гарантированно будут получены?

Comments

[Вадим]

а success у Вас по умолчанию false? Потому что звучит сомнительно. mounted когда компонент уже смонтирован в DOM, а если там v-if то монтировать в DOM нечего. То есть этого не должно происходить.

[photosho]

Вадим вы хорошо заметили. Да, дело было именно в значении по умолчанию. Спасибо.

Answer 1

[Вадим]

Скорее всего success у Вас по умолчанию не false.
Потому что звучит сомнительно.
mounted хук срабатывает когда компонент уже смонтирован в DOM, а если там v-if то монтировать в DOM нечего. То есть этого не должно происходить.