title: Nuxt.js infinite-loading triggered immediately after page load
body: <p>I'm using Nuxt.js with <a href="https://peachscript.github.io/vue-infinite-loading/old/#!/properties" rel="nofollow noreferrer">Infinite loading</a> in order to serve more list articles as the users scrolls down the page. I've placed the infinite-loading plugin at the bottom of my list of articles (which lists, from the very beginning, at least 10 articles, so we have to scroll down a lot before reaching the end of the initial list).</p>
  <p>The problem is that as soon as I open the page (without scrolling the page), the infiniteScroll method is triggered immediately and more articles are loaded in the list (I'm debugging printing in the console &quot;I've been called&quot;).</p>
  <p>I don't understand why this happens.</p>
  <pre><code>&lt;template&gt;
    &lt;main class=&quot;mdl-layout__content mdl-color--grey-50&quot;&gt;
      &lt;subheader :feedwebsites=&quot;feedwebsites&quot; /&gt;
      &lt;div class=&quot;mdl-grid demo-content&quot;&gt;
        &lt;transition-group name=&quot;fade&quot; tag=&quot;div&quot; appear&gt;
          &lt;feedarticle
            v-for=&quot;feedArticle in feedArticles&quot;
            :key=&quot;feedArticle.id&quot;
            :feedarticle=&quot;feedArticle&quot;
            @delete-article=&quot;updateArticle&quot;
            @read-article=&quot;updateArticle&quot;
            @write-article=&quot;updateArticle&quot;
            @read-later-article=&quot;updateArticle&quot;
          &gt;&lt;/feedarticle&gt;
        &lt;/transition-group&gt;
      &lt;/div&gt;
      &lt;infinite-loading spinner=&quot;circles&quot; @infinite=&quot;infiniteScroll&quot;&gt;
        &lt;div slot=&quot;no-more&quot;&gt;&lt;/div&gt;
        &lt;div slot=&quot;no-results&quot;&gt;&lt;/div
      &gt;&lt;/infinite-loading&gt;
    &lt;/main&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState, mapGetters } from 'vuex'
  import subheader from '~/components/subheader.vue'
  import feedarticle from '~/components/feedarticle.vue'
  export default {
    components: {
      subheader,
      feedarticle,
    },
    props: {
      feedwebsites: {
        type: Array,
        default() {
          return []
        },
      },
    },
    computed: {
      ...mapState({
        feedArticles: (state) =&gt; state.feedreader.feedarticles,
      }),
      ...mapGetters({
        getInfiniteEnd: 'feedreader/getInfiniteEnd',
      }),
    },
    methods: {
      async updateArticle(id, status) {
        try {
          const payload = { id, status }
          await this.$store.dispatch('feedreader/updateFeedArticle', payload)
        } catch (e) {
          window.console.log('Problem with uploading post')
        }
      },
      infiniteScroll($state) {
        window.console.log('I've been called')
        setTimeout(() =&gt; {
          this.$store.dispatch('feedreader/increasePagination')
          try {
            this.$store.dispatch('feedreader/fetchFeedArticles')
            if (this.getInfiniteEnd === false) $state.loaded()
            else $state.complete()
          } catch (e) {
            window.console.log('Error ' + e)
          }
        }, 500)
      },
    },
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .fade-leave-to {
    opacity: 0;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease-out;
  }
  &lt;/style&gt;
  </code></pre>