为什么v-for & axios不逐个加载项？

Question

我正在使用vue-2.6.11，axios 0.21.1，vuetify 2.4.3创建一个产品web-app。

我从本地数组中获取类别，然后使用v将fetchUrl作为支撑传递到Row组件中。然后，在Row组件中，我使用axios获取fetchUrl，在得到API响应后，我只是简单地挂载它。它工作得很好，但问题是，类别对象意味着按随机顺序加载行组件，这是因为Row组件在获得API的axios响应时挂载。

因此，我希望下一排等待，直到上面，充分安装或其他任何东西，使它有序地装载。

My组件:

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>

DataSample :-

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": "..."
},...]

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

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

我想，这基本上就是你想要的。