Как отправить данные в дочерний компонент?

Question

[Ismail94]

Я с б.д. получаю массив потомков данного пользователя, как мне их передать в дочерний компонент. Сейчас если я так передаю как в коде то в дочернем компоненте передается пустой массив. Как передать?

data(){
        return{
            partnerChildren: [], //Массив с данными потомков партнера
        }
    },

    methods: {
        //Получаем всех потомков данного партнера
        getChildrenPartner(){
            axios.get('/auth/getChildrenPartner/' + this.$auth.user().inp).then((response)=>{
                this.partnerChildren = response.data.children;
            });
        },
    },

    mounted() {
        Event.$emit('partnerChildren', this.partnerChildren)
    },

    created(){
        //Получим всех потомков партнера
        this.getChildrenPartner();
    },

Comments

[Вадим]

ну так асинхронный код же у вас... Вот сначала и передаётся пустой массив.

[Ismail94]

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

[Вадим]

Ismail94, А Вам точно нужно это "исправить"? Вообще современный фронт как раз так и работает. Пока нет данных - показывается лоадер(спинер), как только данные поступают - компонент рендерится.
Если всё таки нужно, то, самое простое - переписать c помощью async\await.

async getChildrenPartner(){
 const response = await axios.get('/auth/getChildrenPartner/' + this.$auth.user().inp)
 this.partnerChildren = response.data.children;
},

[Ismail94]

Вадим,
Я думал что логика такая в хуке create получаю ответ и данные заношу в свойство partnerChildren.
И когда компонент смонтирован, данные должны быть в свойстве и я их отправляю в хуке mounted

[Вадим]

Ismail94, Вы в created делаете запрос на сервер с помощью axios, который основан на промисах. И ничего больше.
Если хотите чтобы было так, как Вы описали, то нужно делать либо синхронный запрос, либо сказать движку дождаться ответа, перед тем как пойти дальше.

[Вадим]

Ismail94, кстати я походу поторопился и тот код, что я выше написал вроде не решит ваш вопрос.

[Ismail94]

Понял спасибо за ответы.

[Ismail94]

Да я попробовал, также пустой массив.

Answer 1

[Alex]

Родительский компонент не должен отображать дочерний пока для дочернего не загрузится достаточное количество данных. Что-то в таком духе:

<template>
  <child-component v-if="partnerChildren && partnerChildren.length"></child-component>
  <p v-else-if="partnerChildren === null">Загрузка ...</p>
  <p v-else>У партнера нет потомков</p>
</template>