Vue Infinite Loading multiple request issue when page loads

Question

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: {
                components: {
                    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:complete');
                        }
                    });
                },
            },
            mounted: function() {

            }
}

take a look at this link: (laraphp.com/vue-infinite-scroll-laravel/vue-js) — Mohamed Melouk
– 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
– Travis Heeter, Commented Jan 4, 2019 at 18:02

lanmaster53 · Accepted Answer · 2020-07-10 19:22:37Z

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!

answered Jul 10, 2020 at 19:22

lanmaster53

292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dmitry · Accepted Answer · 2021-08-12 09:57:53Z

1

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

answered Aug 12, 2021 at 9:57

Dmitry

111 bronze badge

Comments

Yan Hairul Firdan · Accepted Answer · 2022-11-11 03:24:24Z

0

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 completely.

since the data does not yet show completely 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.

answered Nov 11, 2022 at 3:24

Yan Hairul Firdan

113 bronze badges

Collectives™ on Stack Overflow

Vue Infinite Loading multiple request issue when page loads

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related