Why v-for & axios not loading items one by one?

Question

I am creating a product web-app by using vue-2.6.11, axios-0.21.1, vuetify-2.4.3

I am fetching categories from local array then I am passing fetchUrl as Props it into Row component by using v-for . Then in Row component i am fetching the fetchUrl by using axios after getting API response I'm simply mounting it. It working fine but the problem is categories object means Row component loads in random order cause the Row component mounted as it got axios response from API.

So I want Next row await till upper fully-mounted or any thing else to make it orderly loaded.

My Components :

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

I Hope you guys will help me to resolve this... Thank You :smile:

Ohgodwhy Ohgodwhy · Accepted Answer · 2021-02-06T11:19:31

You could make a computed method that determines how many categories to actually display at any given time, incremented by successful axios requests.

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

Then define successfulCarouselFetches :

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

listen for successful axios requests in your Item-Carousel component:

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

Now broadcast the success whenever your xhr is done working:

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

When the page loads you'll have a single Item-Carousel component on the page which will perform the first XHR request. When the component $emit's the event, the parent component containing the v-for will increment the successfulCarouselFetches which will allow the getter categoriesForDisplay to add another Item-Carousel within the v-for.

This essentially performs what you're asking for, I believe.

Why v-for & axios not loading items one by one?

1 Answers