0
158
ViewsNo se pueden enviar accesorios en vuejs
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:
Código:
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?
2 answers
Answer question0
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 cuandogetData()devuelva una respuesta y tenga un valor significativo.
0
Resuelto
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>