Estoy tratando de enviar 2 accesorios a mi componente de barra de navegación pero no recibe los datos.
Esto es lo que obtengo en lugar de mis datos:
Front.vue (plantilla superior)
<template> <front-nav :menus="menus" :settings="settings"></front-nav> <router-view :key="$route.fullPath"></router-view> <front-footer></front-footer> </template> <script> import frontNav from './frontNavBar.vue'; import frontFooter from './frontFooter.vue'; export default { name: 'front', data(){ return { settings: { name: '', favicon: '', logo: '', }, menus: [], } }, components: { frontNav, frontFooter }, mounted() { this.getData(); }, methods: { getData() { axios.get('/api/general') .then(response => { this.settings = response.data.settings[0]; this.menus = response.data.menus; }) .catch(function (error) { console.log('error', error); }); } }, } </script>
Componente Nabar (accesorios de recepción)
<template> <div>data goes here...</div> </template> <script> export default { name: 'frontNav', props: ['settings', 'menus'], data() { // }, mounted() { console.log('settings: ', this.settings) console.log('menus: ', this.menus) }, methods: { // } } </script>
los resultados de
console.log('settings: ', this.settings)
yconsole.log('menus: ', this.menus)
están en la imagen de arriba.
¿Alguna idea?
Está montando front-nav
antes de getData()
y devuelva la respuesta adecuada, por lo tanto, los accesorios están vacíos. Debe esperar a que getData()
se complete antes de montar front-nav
.
Podrías hacer algo como:
Usar <Suspense>
Use <front-nav v-if="menus" :menus="menus" :settings="settings">
o algo apropiado que sepa que tendrá un valor cuando getData()
devuelva una respuesta y tenga un valor significativo.
childDataLoaded: false,
a mi componente Front.vue
y lo configuré como verdadero cuando se cargan los datos para que funcione ahora, así es como:
<template> <template v-if="childDataLoaded"> // <-- here <front-nav :menus="menus" :settings="settings"></front-nav> </template> <router-view :key="$route.fullPath"></router-view> <front-footer></front-footer> </template> <script> import frontNav from './frontNavBar.vue'; import frontFooter from './frontFooter.vue'; export default { name: 'front', data(){ return { childDataLoaded: false, // <-- here settings: { name: '', favicon: '', logo: '', }, menus: [], } }, components: { frontNav, frontFooter }, mounted() { this.getData(); }, methods: { getData() { axios.get('/api/general') .then(response => { this.settings = response.data.settings[0]; this.menus = response.data.menus; this.childDataLoaded: true, // <-- here }) .catch(function (error) { console.log('error', error); }); } }, } </script>