I'm currently using Vue Infinite Loading on my Laravel App to display data, the problem I'm facing is that by when page loads it request all data even if I dont make a page scroll. From what I've understand it should only make request when my current scroll is at the bottom. Below is 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 {
            data: function(){
                return {
                    leagueLeaders: [],
                    playerStats: [],
                    pagination: 1,
                }
            },
            methods: {
                ponents: {
                    InfiniteLoading,
                },
                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:plete');
                        }
                    });
                },
            },
            mounted: function() {

            }
}

I'm currently using Vue Infinite Loading on my Laravel App to display data, the problem I'm facing is that by when page loads it request all data even if I dont make a page scroll. From what I've understand it should only make request when my current scroll is at the bottom. Below is 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 {
            data: function(){
                return {
                    leagueLeaders: [],
                    playerStats: [],
                    pagination: 1,
                }
            },
            methods: {
                ponents: {
                    InfiniteLoading,
                },
                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:plete');
                        }
                    });
                },
            },
            mounted: function() {

            }
}

• javascript
• vue.js
• infinite-scroll
• vue-ponent

Share Follow edited Jun 23, 2017 at 5:14 PenAndPapers asked Jun 21, 2017 at 7:31 PenAndPapersPenAndPapers 2,10899 gold badges3434 silver badges6565 bronze badges 2

• take a look at this link: (laraphp./vue-infinite-scroll-laravel/vue-js) – Mohamed Melouk Commented Jun 25, 2018 at 3:57
• Have you checked your network tab to see what URL the request is being sent to? This smells like the wrong url... – Travis Heeter Commented Jan 4, 2019 at 18:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I noticed the same behavior and figured out what was causing it on my end. If the first page of results doesn't fill up the wrapping UI element, then Vue Infinite Loading will auto page until it does. This was causing 2 page loads on initial load when I wasn't putting enough data to fill the element on the first. I used dev tools to reduce the size of the UI until the initial load filled the element, and then it worked as expected. Hope this helps!

Solved the problem by removing overflow:hidden; on parent element

this behavior happens because, after your first request, you fired event loaded self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); and your data was not shown on your page pletely.

since the data does not yet show pletely it will left remain space and the vue-infinite-loading will assume that it will need to make more requests.

to prevent that, you can simply defer self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); for several seconds using setTimeout() function to wait for your data rendered on your page.