"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?

[trandaison]

There will be one more case that causes calling handler multiple time.

Here is my handler. I've added a filter statement to make sure there are no duplicated records.

infiniteHandler($state) {
  axios.get(api, {
    params: {
      page: this.page,
    },
  }).then(({ data }) => {
    if (data.hits.length) {
      this.page += 1;
      const newHits = data.hits.filter((hit) => 
        this.list.every((item) => item.id !== hit.id)
      );
      this.list.push(...newHits);
      $state.loaded();
    } else {
      $state.complete();
    }
  });
}

The problem comes when the data.hits.length > 0 and newHits = [], so the list never changes and it keeps calling the handler.