@sumrakx

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

Привет ребята, интересует мнение сообщества как можно передать в
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?
  • Вопрос задан
  • 169 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F
Сделайте свойство, где будут хранится данные, передаваемые в дочерний компонент, а ту странную штуку с computed свойством замените обычным методом. Выглядеть это будет примерно так:

data() {
  return {
    apiData: null,
  },
},
methods: {
  getAPIData() {
    accessAPI().then(result => this.apiData = result);
  },
},
created() {
  this.getAPIData();
},

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

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

<imgMap :api="apiData" v-if="apiData"></imgMap>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы