How to implement infinite scroll in my vue js

Question

I currently learning combining laravel with vue. This page should be fetching post data from server and showing in user timeline. I am successfully get all data and display it. But i want to implement a infinite scroll into it but i had no idea how to do it. i had been tried many different way also not working. Maybe is my knowledge about vue is still fresh. Any suggestion for me?

Here is my original code :jsfiddle

Here is code i try to implement infinite scroll with this example .

jsfiddle 2

The scrolling symbol is showing but seem like the array did't not passing , the data still appear all in one time.

Once submitted /feed the server will return array which contain post information. But i don't know how to passing into the list array.

Returned Array

In vue

In route

Answer 1

Installation:

npm install vue-infinite-scroll --save

Registration in your main.js:

// register globally
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll)

// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
  directives: {infiniteScroll}
})

Your html:

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

You component:

var count = 0;

new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});

Answer 2

I also tried the Vue-infinite-scroll, but it's not working properly when aligning with Vue-router, at least in my code. So I came up with my own solution.

<template>
  <div ref="loadmore" class="infinite-container">
      <!-- the inifite container -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      // check if is in infinite procees
      busy: false
    }
  },
  methods: {
    infiniteScrollHandler() {
        //check if container's bttom is overflow screen
      let bottomOff =
        this.$refs.loadmore.getBoundingClientRect().bottom - screen.height;
      if (bottomOff < 10 && !this.busy) {
        console.log("loading... " + new Date());
        this.busy = true;
        // do something 
        this.busy = false;
      }
    },
    setIntervalTimer() {
      //check every 500 milliseconds
      this.timer = setInterval(() => {
        this.infiniteScrollHandler();
      }, 500);
    }
  },
  mounted() {
      // set up timer on mounted
    this.setIntervalTimer();
  },
  beforeDestroy() {
      // do not forget clear the interval timer
    clearInterval(this.timer);
  }
};
</script>