Nuevo en Vue y JS. Tengo una página vue myLists que toma una serie de listas (que contienen ID de medios para un título) que usé para hacer llamadas a la API de axios y construir un carrusel (usando el paquete vue3-carousel) en el niño con los datos de retorno enviados como accesorio . Actualmente estoy lidiando con una advertencia de "Actualizaciones recursivas máximas excedidas en el componente v-for" que creo que tiene que ver con la forma en que hago mis llamadas a la API. Aquí está el código relevante a continuación:
Parent "myLists", tiene múltiples listas (cada lista tiene películas) y obtiene datos de api usando axios:
<template> <div v-if="isReady"> <List v-for="list of theList" :key="list.id" :aList="list"></List> </div> </template> export default { setup() { const theList = ref([]); for (var myList of myLists) { const aList = ref([]); for (var ids of myList) { var apiLink = partLink + ids; axios.get(apiLink).then((response) => { aList.value.push({ title: response.data.original_title || response.data.name, overview: response.data.overview, url: "https://image.tmdb.org/t/p/w500" + response.data.poster_path, year: response.data.first_air_date || response.data.release_date, type: ids[1], id: response.data.id, }); }); } theList.value.push(aList.value); } return { theList }; }, computed: { isReady() { //make sure all lists are loaded from the api before rendering return this.theList.length == myLists.length; }, },El componente secundario "Lista" (sin incluir la etiqueta de secuencia de comandos, ya que no creo que sea demasiado relevante) toma los datos obtenidos como apoyo y crea un carrusel con ellos:
<template> <Carousel :itemsToShow="4.5" :wrapAround="true" :breakpoints="breakpoints"> <Slide v-for="slide of aList" :key="slide"> <img @click="showDetails" class="carousel__item" :src="slide.url" alt="link not working" :id="slide" /> </Slide> <template #addons> <Navigation /> <Pagination /> </template> </Carousel> </template>No sé qué está causando el error exactamente. Tengo la sensación de que podría ser la forma en que hago todas mis llamadas a la API, o tal vez sea algo más obvio. ¿Alguien tiene una pista?
La solución fue en realidad absurdamente simple, estaba en el camino correcto. El componente intentaba renderizarse antes de que mis datos estuvieran listos, así que simplemente agregando un
"v-if="list.length!==0"directamente en mi componente Carrusel (dentro de mi componente Lista), a diferencia del principal, solucionó mi problema.
Asumí que los accesorios están listos automáticamente cuando se los pasan a un niño si usé un v-if en mi padre, resulta que estaba equivocado y que hay un retraso.
Encontré la solución en la página de problemas de github: