Vue3 v-for 组件 <Carousel> 中超出的最大递归更新答案

【问题标题】：Vue3 v-for Maximum recursive updates exceeded in component <Carousel>Vue3 v-for 组件 <Carousel> 中超出的最大递归更新
【发布时间】：2022-06-28 15:15:13
【问题描述】：

Vue 和 JS 的新手。我有一个 vue 页面 myLists ，它带有一个列表数组（包含标题的媒体 ID），我用来进行 axios API 调用并在子级中构建一个轮播（使用 vue3-carousel 包），返回数据作为道具发送.我目前正在处理“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;
    },
  },

子组件“列表”（不包括脚本标签，因为我认为它不太相关）将获取的数据作为道具并用它构建一个轮播：

<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 调用的方式，或者可能是其他显而易见的事情。有人知道吗？

【问题讨论】：

我认为，v-for 语法是错误的，正确的是，v-for="list in theList"
是的，我想我不久前将它从“in”更改为“of”，看看是否有什么不同。不影响我的警告，但我忘了改回来。谢谢提醒

标签： javascript vue.js axios vuejs3 vue3-carousel

【解决方案1】：

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

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

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

我假设如果我在父母中使用 v-if，当传递给孩子时道具会自动准备好，结果证明我错了，并且存在延迟。

在 github 问题页面上找到了解决方案：

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

【讨论】：

【解决方案2】：

哇，你的方法真的有效！！！！我已添加到轮播标签“v-if="list.length!==0"

【讨论】：