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

by

0👍

✅

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.

Leave a comment