Usando VueJS e Axios, como faço para recuperar dados de API e passá-los para vários componentes filhos? Quero recuperar e passar esses dados por meio de adereços, para não ter que acessar a API várias vezes por meio dos componentes filhos.
Atualmente, o componente filho está retornando 'indefinido'.
Pai
<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>
Filho
<script>
props: ['foo'],
mounted(){
console.log(this.foo)
}
</script>
v-if=(e sua contraparte v-else) controlam o que está no DOM condicionalmente com base no valor verdadeiro de uma expressão js. Você pode manter qualquer nó fora do dom (incluindo seus my-childcomponentes) qualificando-o com um v-if que avalia como falso.
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>Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras