I have integrated Vue Infinite Loading into my Laravel App to handle data display. The issue I am encountering is that the data is being requested upon page load, even when no scrolling is done. As far as I know, it should only load new data when the scroll reaches the bottom of the page. Here is a snippet of my code:
<infinite-loading :on-infinite="onInfinite" spinner="spiral" ref="infiniteLoading">
<span slot="no-more"></span>
</infinite-loading>
import InfiniteLoading from 'vue-infinite-loading';
export default {
components: {
InfiniteLoading,
},
data() {
return {
leagueLeaders: [],
playerStats: [],
pagination: 1,
}
},
methods: {
onInfinite() {
let self = this;
axios.get(config.NBLAPI + config.API.PLAYERSTATS2, {
params: {
page: self.pagination,
}
}).then( (response) => {
let data = response.data.data;
let lastpage = response.data.last_page;
if ( response.status == 200 && data.length > 0) {
self.leagueLeaders = self.leagueLeaders.concat(data);
self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
if(self.pagination <= lastpage){
self.pagination += 1;
}
}
else {
self.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
}
});
},
},
mounted() {
}
}