为什么 v-for & axios 不一个个加载项目？答案

【问题标题】：Why v-for & axios not loading items one by one?为什么 v-for & axios 不一个个加载项目？
【发布时间】：2021-05-10 13:20:24
【问题描述】：

我正在使用 vue-2.6.11、axios-0.21.1、vuetify-2.4.3 创建产品 web-app

我从本地数组中获取类别，然后使用 v-for 将 fetchUrl 作为 Props 传递到 Row 组件中。然后在 Row 组件中，我在获得 API 响应后使用 axios 获取 fetchUrl，我只是安装它。它工作正常，但问题是类别对象意味着 Row 组件以随机顺序加载导致 Row 组件在从 API 获得 axios 响应时安装。

所以我希望 Next row await 直到上部完全安装或其他任何东西使其有序加载。

我的组件：

Home.vue -

<template>
    <div>
        <div v-for="(categories,index) in categories" :key="`${index}`">
            <ItemsCarousel
                :title="categories.title"
                :fetch-url="categories.fetchUrl"
            />
        </div>
    </div>
</template>
<script>
import categoriesList from '@/local-database/Categories.json';
import ItemsCarousel from '@/components/carousel/ItemsCarousel';
export default {
    name: 'Home',
    components: {
        ItemsCarousel
    },
    data: () => ({
        categories: categoriesList.filter( categories => (catalogue.for==true || categories.for=="home"))
    })
}
</script>

ItemsCarousel.vue -

<template>
<div class="items-carousel">
  <v-lazy v-model="isActive" :options="{threshold: 0.5}">
  <h1>{{title}}</h1>
  <div class="items-carousel" v-for="product in products" :key="product.id">
   <Card  v-bind="{...product}">/>
  </div>
  </v-lazy>
</div>
</template>

<script>
import ProductManger from '@/mixins/ProductManger';
import Card from '@/components/Card';
export default {
  name: 'ItemsCarousel',
  mixins: [ProductManger], // Axios Setup 
  components: {
    Card
  },
  props: ['title','params'],
  data: () => ({
    isActive: false,
    cards: []
  }),
  methods: {
    async loadCard() {
        this.contentMangerCore(this.params) // Function code inside mixins
        .then(res => {
            this.cards = res.data;
        })
    }
  },
  mounted() {
    this.loadCard(); 
  }
};
</script>

数据样本：-

categoriesList.json-

[{
    "id": 1,
    "name": "Adventure",
    "params": {
        "categories": "Adventure",
        "sort": "ASC"
    }
}, {
    "id": 2,
    "name": "Art",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
}, {
    "id": 3,
    "name": "Beauty",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
}, {
    "id": 4,
    "name": "Business",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
}, {
    "id": 5,
    "name": "Craft",
    "params": {
        "categories": "Art",
        "sort": "DESC"
    }
},...]

products.json-

[{
"name": "AdventureIRC",
"img": "..."
},
{
"name": "Adventie",
"img": "..."
},...]

我希望你们能帮助我解决这个问题... 谢谢你：微笑：

【问题讨论】：

标签： javascript vue.js vuejs2 axios

【解决方案1】：

您可以创建一个计算方法来确定在任何给定时间实际显示的类别数量，并由成功的 axios 请求递增。

get categoriesForDisplay() {
  return this.categories.slice(0, this.successfulCarouselFetches + 1)
}

然后定义successfulCarouselFetches :

data() {
  return {
    //
    successfulCarouselFetches : 0
  }
}

listen 用于您的Item-Carousel 组件中成功的 axios 请求：

<ItemsCarousel
  :title="categories.title"
  :fetch-url="categories.fetchUrl"
  @success="successfulCarouselFetches = successfulCarouselFetches + 1"
/>

现在，只要您的 xhr 完成工作，就广播 success：

methods: {
    async loadCard() {
        this.contentMangerCore(this.params) // Function code inside mixins
        .then(res => {
            this.cards = res.data;
            this.$emit('success');
        })
    }
  },

当页面加载时，页面上有一个Item-Carousel 组件，它将执行第一个 XHR 请求。当组件$emit 发生事件时，包含v-for 的父组件将增加successfulCarouselFetches，这将允许getter categoriesForDisplay 在v-for 中添加另一个Item-Carousel。

我相信，这基本上可以满足您的要求。

【讨论】：