async created() { if (this.tournamentId === 0) await router.push('/'); this.events = await this.fetchEvents(this.tournamentId); this.setRings(this.events); }, methods: { async fetchEvents(tournamentId){ const res = await fetch(httpserver + `all-events.php?tid=${tournamentId}`) const data = await res.json(); return data }, setRings(events){ events.forEach(e => { e.rings = this.fetchRings(e.EventID); }) }, async fetchRings(eventId){ const res = await fetch(httpserver + `pool-information.php?eid=${eventId}`) let data = await res.json(); return data; } }

Para cada torneo, necesito hacer otra llamada para obtener los fondos. Sin embargo, esto no funciona muy bien, parece que hacer que los métodos sean asíncronos realmente no hace que vue espere hasta que termine de cargarse antes de intentar continuar.

Comienzo con un error como este... Events.vue?aa9c:51 Uncaught (en promesa) TypeError: events.forEach no es una función

La página se cargará, pero rara vez mostrará alguno de los datos, porque se procesará antes de que los datos terminen de cargarse.

¿Cómo puedo encadenar dos recuperaciones de manera que el renderizado no suceda hasta después de que se hayan recuperado los datos?