Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

174
Vistas
Obtener datos con Nuxt

Estoy llamando datos con Nuxt async fetch() así:

 export default { .... async fetch() { let childrenUrl = process.env.VUE_APP_MGNL_API_PAGES + this.projectPage + "/@nodes"; await this.$http.$get(childrenUrl).then(childResult => { this.projectsPageChildren = childResult; }) }, fetchOnServer: false, ... }

projectsPageChildren devuelve una matriz con objetos, cada uno de los cuales contiene una propiedad "servicesMain" que contiene una ruta URL, vea la captura de pantalla a continuación. ingrese la descripción de la imagen aquí

Necesito acceder a los datos de la ruta de la URL de servicesMain y asumo que para obtenerla, necesito hacer otra llamada de búsqueda con la URL de "servicesMain".

Entonces, lo que estoy intentando es esto: recorro los proyectosPageChildren con v-for y en cada niño llamo a una función "getMainService" a la que paso la URL principal de servicios.

 <div class="card" v-if="projectsPageChildren" v-for="project in projectsPageChildren"> <div class="title">{{ getMainService(project.servicesMain) }}</div> <div class="title">{{ project.title }}</div> <Btn :to="project['@path']">More</Btn> </div>

El método "getMainService" se coloca dentro del enlace "métodos" de VUE y realiza otra llamada asíncrona con la URL que recibe como argumento.

 methods: { async getMainService(servicePath) { let url = process.env.VUE_APP_MGNL_API_PAGES + servicePath; await fetch(url) .then(result => { result.json().then((data) => { console.log(data); console.log(data.title); return data.title; }); }) .catch(error => console.log(error)); },

},

Las dos declaraciones de registro de la consola en la función muestran los datos que necesito que devuelva la función.

ingrese la descripción de la imagen aquí

Sin embargo, todo lo que veo en el navegador es "[promesa de objeto]". ingrese la descripción de la imagen aquí

Para resumir: estoy usando el gancho fetch() de Nuxt para obtener mis datos que devuelven una matriz. Cada objeto de la matriz contiene una URL que apunta a más datos.

¿Cómo configurar correctamente esta segunda llamada de búsqueda? ¿Que me estoy perdiendo aqui?

Leí los documentos sobre la obtención de datos de Nuxt y las promesas y respuestas de Javascript, pero ninguno parecía abordar mi problema exactamente.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Terminé resolviéndolo así:

En mi código original, llamé al método "getMainService ()" en la sección de plantilla de Vue, que no funcionó. Ahora estoy haciendo una segunda solicitud en el método async fetch() y llamo al método desde allí. En el ciclo forEach, básicamente estoy reescribiendo la propiedad de los Objetos a lo que devuelve el método.

Este es el nuevo código:

 async fetch() { let thisPageUrl = process.env.VUE_APP_MGNL_API_PAGES + this.projectPage; await this.$http.$get(thisPageUrl).then(thisPageResult => { this.projectsPageData = thisPageResult; }) let childrenUrl = process.env.VUE_APP_MGNL_API_PAGES + this.projectPage + "/@nodes"; await this.$http.$get(childrenUrl).then(projectPages => { this.projectsPageChildren = projectPages; this.projectsPageChildren.forEach(projectPage => { this.getMainService(projectPage.extras[0].serviceMain).then(res => { projectPage.extras[0].serviceMain = res; }); }) }) }, fetchOnServer: false,

El método getMainService() realiza una llamada a una ruta y devuelve un valor de cadena:

 methods: { getMainService(servicePath) { let url = process.env.VUE_APP_MGNL_API_PAGES + servicePath; return this.$http.$get(url).then(serviceMain => { return serviceMain.title; }) },

},

El bit de plantilla se ve así:

 <div> <div class="card" v-if="projectsPageChildren" v-for="(project, index) in projectsPageChildren"> <div class="column_title">{{ project.serviceMain }}</div> <div class="title">{{ project.title }}</div> <Btn :to="project['@path']">More</Btn> </div> </div>

Quizás no sea la solución más bonita, pero funciona. Gracias a @kissu y @GrafiCode, sus comentarios me empujaron en la dirección correcta.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda