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

Question

[Андрей]

Часто сталкиваюсь с тем, что когда дочерний компонент использует в качестве props какое-то значение из родителя, загружаемое по ajax, дочерний компонент в итоге работает криво. Сейчас поясню.

При нормальной перезагрузке страницы (ctrl+R), а так же при переходе по роутам, дочерний компонент рендерится пустым, словно там нет данных. Если же изменить что-то в этом компоненте, то после Hot Reload, которую инициализирует сам Vue, данные корректно отображаются, так как в этот момент времени они уже загружены.

Есть ли какое-то решение данной проблемы? Без костылей.

Comments

[Андрей]

Один из способов: установить v-if на ожидаемый параметр. Есть еще варианты?)

Answer 1

[Дмитрий Гололобов]

Я обычно добавляю условие на отображение компонента. По умолчанию например параметр равен false после загрузки данных его значение меняется, дочерний компонент будет отображаться только после загрузки данных.

<template>
    <child-component v-if="param" :any="param"></child-component>
</template>
<script>
export default {
    name: 'parent-component',
    components: {
        ChildComponent,
    }
    data(){
        return {
            param: false
        }
     },
     methods: {
          getParam(){
              axios.get('server/path').then(response => {
                  this.param = response.data
              })
         }
    },
    mounted(){
        this.getParam()
    }
}
</script>