javascript - Vue3 v-for 组件 中超过最大递归更新

Question

Vue 和 JS 的新手。我有一个 vue 页面 myLists，它采用列表数组(包含标题的媒体 ID)，我用来调用 axios API 并在子级中构建一个轮播(使用 vue3-carousel 包)，返回数据作为 Prop 发送.我目前正在处理“v-for 组件中超出的最大递归更新”警告，我认为这与我进行 API 调用的方式有关。下面是相关代码:

父“myLists”，有多个列表(每个列表都有电影)并使用 axios 从 api 获取数据:

<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;
    },
  },

子组件“List”(不包括脚本标签，因为我认为它不太相关)将获取的数据作为 prop 并用它构建一个轮播:

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

不知道究竟是什么导致了错误。我有一种感觉，这可能是我执行所有 API 调用的方式，或者可能是其他显而易见的事情。有人知道吗？

Answer 1

修复实际上非常简单，我在正确的轨道上。该组件试图在我的数据准备好之前呈现，因此只需添加一个

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

直接在我的 Carousel 组件上(在我的 List 组件内)，而不是在父组件上解决了我的问题。

我假设如果我在我的 parent 身上使用 v-if， Prop 在传递给 child 时会自动准备好，结果我错了，而且有延迟。

在github issues页面找到了解决方法:

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