Can someone please help me with using VueJS and Axios to retrieve API data and pass it to multiple child components? I am trying to avoid accessing the API multiple times in the child components by passing the data through props.
The issue I am facing is that the child component is currently 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>