• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

238
Views
cómo pasar datos de api como prop en vuejs

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}}
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

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" />
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error