Obtengo datos de API que quiero pasar como apoyo a un componente secundario
Componente principal
<template> <div class="dashboard"> <items name="Admins" value={{data.items.hubs}} bgColor="#a80c0c" /> </div> </template> import Items from './Items.vue' import { Admin } from '@/services/AdminService'; export default { name: "AdminDashboard", components: { Items }, setup(){ onMounted(() => { showLoader(true); Admin.getDashboardItems() .then((response) => { data.items = response.data.data }) .catch((error) => { }) .finally(() => { showLoader(false); }); }); return { data } } }
Obtuve el valor que necesito de la API y lo pasé a data.items
Si lo muestro en el componente principal.
Funciona bien pero en el componente secundario.
No funciona
Componente hijo
<template> <div class="col-md-3"> <div class="items" :style="{ backgroundColor: bgColor }"> <div class="d-flex space-between"> <div></div> <div> <h5>{{ value }}</h5> <span>{{ name }}</span> </div> </div> </div> </div> </template> <script> export default { name: "Items", props: ["bgColor", "value", "name"] } </script>
Los componentes secundarios muestran {{data.items.hubs}} en lugar del valor de hub
Los datos de la API
{"data":{"users":1,"incubatees":1,"hubs":2,"investors":1,"events":0,"admins":3,"programs":0}}
Después de algunas investigaciones
Descubrí que se suponía que no debía usar {{}}
en cambio, debería hacerlo de esta manera en el componente principal
<items name="Hubs" :value="data.items.hubs" bgColor="#d79a2b" />