Vue3 v-for Maximum recursive updates exceeded in component <Carousel>

Question

New to Vue and JS. I have a vue page myLists which takes an array of lists (containing media IDs for a title) which I used to make axios API calls and build a carousel (using vue3-carousel package) in the child with the return data sent as a prop. I'm currently dealing with a "Maximum recursive updates exceeded in v-for component " warning that I believe has to do with how I make my API calls. Here is the relevant code below:

Parent "myLists", has multiple lists (each list has movies) and fetches data from api using 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;
    },
  },

Child component "List" (not including script tag as I don't think it's too relevant) takes the fetched data as a prop and builds a carousel with it:

<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>

Don't know what's causing the error exactly. I have a feeling it could be how I do all my API calls, or maybe it's something else obvious. Anyone have a clue?

Answer 1

The fix was actually absurdly simple, I was on the right track. The component was trying to render before my data was ready, so simply adding a

"v-if="list.length!==0"

directly on my Carousel component (within my List component), as opposed to the parent, fixed my issue.

I assumed that props are automatically ready when passed to a child if I used a v-if in my parent, turns out I was wrong, and that there's a delay.

Found the solution on the github issues page:

https://github.com/ismail9k/vue3-carousel/issues/154