VueJS - How to pass Axios response data from parent to child component?

Question

Using VueJS & Axios, how do I retrieve API data and pass it to multiple child components? I want to retrieve and pass this data through props so I will not have to access the API multiple times via the child components.

Currently, child component is returning 'undefined'.

Parent

<template>
    ...
    <my-child :foo="bar" />
    ...
    <my-other-child :foo="bar" />
    ...
</template>
<script>
    import axios from 'axios'
    ...
    mounted(){
        axios.get(...)
             .then(rsp => {this.bar = rsp.data.result})
             .catch(err => {console.warn(err)})
    }
    ...
</script>

Child

<script>
    props: ['foo'],
    mounted(){
        console.log(this.foo)
    }
</script>

Answer 1

v-if= (and its counterpart, v-else ) control what's in the DOM conditionally based on the truth value of a js expression. You can keep any node out of the dom (including your my-child components) by qualifying it with a v-if that evaluates to false.

 var app = new Vue({ el: '#app', data: { bar: null }, mounted () { setTimeout(() => this.bar = 'foo', 2500); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <div v-if="bar">bar is {{bar}}</div> <div v-else>bar is not initialized</div> </div> </div>