"loaded" doesn't stop loading

[DaveSanders]

v2.1.3 - for some reason the "loaded" emit isn't stopping it from continuing to load results down the page. I'm pretty sure this was working before, but I can't figure out why this is happening.

So, basically even though I haven't scrolled down, it keeps hitting my server and loading more results. Here's my onInfinite function:

onInfinite () {
        api.tracks.get(PAGE_AMOUNT, this.tracks.length, tr => {
          console.log(`TRACKS: ${this.tracks.length}`)

          if (tr.length > 0) {
            this.tracks = this.tracks.concat(tr)
            if (tr.length < PAGE_AMOUNT) {
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
            } else {
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
            }
          } else {
            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
          }
        })
      }

My template:

<template>
  <div id="track-list">
    <TrackItem v-for='(track, index) in tracks' :track='track' :index="index" :key='track.id'/>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" spinner="waveDots"></infinite-loading>
  </div>
</template>

I did put console logs in and it IS hitting that else where it sends the loaded emit. I also changed it to :complete and it stopped calling at that point in the code. So it is emitting, it just seems like its not caring - or for some reason it thinks that its scrolled down.

Anything I'm doing wrong? Or any ideas on how to debug it further?

[DaveSanders]

Simplified the onInfinite, but same result:

 onInfinite () {
        api.tracks.get(PAGE_AMOUNT, this.tracks.length, tr => {
          if (tr.length > 0) {
            this.tracks = this.tracks.concat(tr)
            console.log(`TRACKS: ${this.tracks.length}`)
            this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
          } else {
            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
          }
        })
      }

[PeachScript]

I have changed the distance calculation method since v2.1.2, perhaps there has something wrong in the latest version if you were using a version earlier than v2.1.2 before, could you reproduce this problem on JSFiddle or other website like it?

[Akari1987]

When I use in nested component, I have same issue.

[Akari1987]

I'm sorry it was my misunderstanding. I used vue within Laravel, so it may be caused by laravel blade tempalte in my case :)

[PenAndPapers]

I currently experiencing this kind of issue, it creates multiple request during page loading I'm using Laravel 5.4 and axois. Below is my JS code

axios.get(config.API + config.API.PLAYERSLEADERBOARD, {
    params: {
        splits: self.splits,
        playingPosition: self.playingPosition,
        competitionId: self.competitionId,
        page: self.pagination,
        sort: self.sort,
        order: self.order,
        limit: self.limit,
    }
}).then( (response) => {
    let data = response.data.data;
    let lastpage = response.data.last_page;

    if ( data.length ) {
        self.leagueLeaders = self.leagueLeaders.concat(data);
        self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
        self.pagination += 1;
        if(self.pagination == lastpage){
            self.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
            console.log(123);
        }
    }
    else {
        self.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
        if( url.includes('orderby') ) {
            let order = url.split('/').pop();
            let highlight = document.getElementsByClassName(order);
            _.forEach(highlight, (elem, key) => {
                elem.className += ' hightlight';
            });
        }
        else {
            let highlight = document.getElementsByClassName('points');
            _.forEach(highlight, (elem, key) => {
                elem.className += ' hightlight';
            });
        }
    }
});

[rodwin]

I am also experiencing this issue. The event keeps on firing even if I am not scrolling. Its weird because I just followed the guide. I am using elementUI's table

[PeachScript]

@PenAndPapers @rodwin which version of Vue.js and this component do you use? If it is possible, please reproduce your problem on JSFiddle, thanks!

[PenAndPapers]

I'm using "vue": "^2.0.1" and "axios": "^0.15.2".

[PenAndPapers]

I thought it was not compatible with axios so I tried to use "vue-resource": "^1.2.1", but still no luck

[PeachScript]

@PenAndPapers I think it was not caused by ajax lib, if you are using vue-router and enable the keep-alive feature, I recommend you to try to use the Vue.js v2.2.0 and later, refer issue.

[mcmillion]

I'm seeing this issue as well with VueJS 2.3.4. I'm also seeing it send out two events each time.

[PenAndPapers]

@PeachScript I've tried Vue.js v2.2.6 still not working, im not using vue router on my project

[PeachScript]

@mcmillion @PenAndPapers I need your help to find the real reason, could you reproduce this problem on JSFiddle? You can use setTimeout instead of ajax requests, thanks!

[vbabenko]

I have same issue (Vue 2.3) and vue-infinite-loading (2.1.3) sends event all time. Similar case to @DaveSanders.
I tried to create jsFiddle but I could not reproduce https://jsfiddle.net/vbabenko/fb6r82eb/3/ even with flexbox. It's pretty hard to move part of project to jsfiddle for reproducing...

@PeachScript Could the issue be related to css?

[DaveSanders]

To make matters worse (at least for finding the bug) its stopped doing it for me, and seems to be working fine now. I'm really not sure what I've changed. I'm guessing its related to page structure, and I did move some things around when we redesigned the screen. I was going to go back to look at old commits to see if I can find the difference, but I've been slammed with crunch time here.