Как передать в props результат асинхронной функции?

Question

[sumrakx]

Привет ребята, интересует мнение сообщества как можно передать в

props

от App.js [root component] в child-component результат асинхронной функции, вместо prommise
Скажем у меня есть App.js:

<template>
    <div id="app">
        <imgMap v-bind:api="accessAPI"></imgMap>
    </div>
</template>

<script>
import accessAPI from './js/api/api-v1'; // import api

export default {
        name: 'app',
        components: {
           imgMap
        },
        data() {
            return {
                mapID: null,
                api: null,
            }

        },
        computed: {
             accessAPI : function (){
                 return accessAPI()
             } 
        }
<script>

В child-component прилетает prommise. Какой есть способ получить Oject на уровне App.js и уже дальше его передавать в другие child-components?

Answer 1

[0xD34F]

Функцию вызывайте при создании экземпляра компонента, результат записывайте в свойство (кажется, у вас уже есть подходящее - api). Ту странную штуку с computed свойством вырежьте. Выглядеть это будет примерно так:

created() {
  accessAPI().then(result => this.api = result);
},

<imgMap :api="api"></imgMap>

Если в дочерний компонент не должны передаваться пустые данные, не надо его рендерить, пока данные не будут получены:

<imgMap v-if="api" :api="api"></imgMap>

UPD.

Вынесено из комментариев:

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

props: {
    api : Object
},
data() {
    return {
        apiLocal : null
    }
}
async mounted() {
    this.apiLocal = await this. api;
    await this.apiLocal.methods1();
}

Вы по-прежнему в качестве значения параметра api передаёте промис. Надо в родителе дождаться его результата - тот первый await из вашего mounted, он в родительском компоненте должен быть. Он, или эквивалентный ему then с коллбеком - как в примере выше.

Comments

[sumrakx]

Спасибо за дельный совет. Сейчас я получаю Object в дочерний класс imgMap. Но я не могу напрямую вызывать асинхронные методы из обьекта они недоступны. Сейчас я решил проблему так:

<script>
export default {
        name: "imgMap",
        props: {
            api : Object
        },
        data() {
            return {
                apiLocal : null
            }
        }
        async mounted() {
            this.apiLocal = await this. api;
            await this.apiLocal.methods1();
        }
</script>

Меня больше всего интересует почему я не могу достучаться до них не передав предварительно обьект в локальное свойство компонента. Так и оставить или я чего то не знаю?