having more than 1500 items some function calls to fill the list are lost

[nelsonlarocca]

1- if you trigger the load frequently it drops an error

2- after several times invoking the function to add items to the list to be displayed, the function starts auto-triggering itself but info is never displayed. Try it with 1500 items and you'll got it

3- if you load some thousands some times the function that fills the list is not invoked so also they are never displayed

Heres one of the codes:

<template>
  <v-container v-bind="{ [`grid-list-${size}`]: true }" fluid>
    <v-layout align-start justify-start row wrap mx-auto>
      <v-flex v-for="(item, $index) in bizList" :key="$index">
        <MyCard
          :id="item.id"
          :name="item.name"
          :index="$index"
        />
      </v-flex>
    </v-layout>
    <infinite-loading
      ref="infiniteLoading"
      spinner="spiral"
      @infinite="infiniteHandler"
    >
      <span slot="no-more">--- End of Listing ---</span>
      <span slot="no-results">No Records Found</span>
    </infinite-loading>
  </v-container>
</template>

<script>
import { mapGetters } from 'vuex'
import MyCard from '@/components/biz/MyCard'

export default {
  middleware: 'auth',
  layout: 'dashboard',
  components: {
    MyCard,
  },
  data() {
    return {
      page: 0,
      list: [],
      message: '',
      size: 'md',
      currentCard: 0,
      itemsPerPage: 10,
    }
  },
  computed: {
    ...mapGetters({
...
    }),
  },

  methods: {
    infiniteHandler($state) {
      const items = this.bizList.slice(
        this.page * this.itemsPerPage,
        (this.page + 1) * this.itemsPerPage
      )

      console.log('page -> ', this.page, 'items -> ', items)

      setTimeout(() => {
        if (items.length) {
          console.log('entering if items ', this.page)
          this.page++
          this.list.push(...items)
          $state.loaded()
        } else {
          $state.complete()
        }
      }, 1000)
    },
  },
}
</script>