How to pass the result of an asynchronous function to props?

Question

Vue.js

Hi guys, I'm interested in the opinion of the community, how can I convey to

props

from App.js [root component] to child-component result of async function instead of prommise
Let's say I have 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>

Prommise arrives in child-component. What is the way to get Oject at the App.js level and pass it on to other child-components?

Answer 1

Make a property where the data passed to the child component will be stored, and replace that strange thing with a computed property with a regular method. It will look something like this:

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

<imgMap :api="apiData"></imgMap>
If empty data should not be passed to the child component, it should not be rendered until the data is received:
<imgMap :api="apiData" v-if="apiData"></imgMap>