vue-infinite-scroll

https://github.com/jericopulvera/vue-mugen-scroll

by Jerico Pulvera

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-mugen-scroll@0.2.5/dist/vue-mugen-scroll.min.js"></script>
<div id="vue-instance" class="container">
      <div class="row">
        <div  class="col-sm-6" v-for="(post, index) in posts">
        <div class="card m-4" style="width: 18rem;">
          <img class="card-img-top" src="https://via.placeholder.com/350x150">
          <div class="card-body">
            <h5 class="card-title"><strong>{{ post.title }}</strong></h5>
            </div>
          </div>
        </div>  
      </div>
      <mugen-scroll :handler="getPosts" :should-handle="!loading">
        loading...
      </mugen-scroll>
</div>

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data: {
  	posts: [],
    loading: false
  },
  created() {
    this.getPosts()
  },
	methods: {
    getPosts() {
    	for (var i = 0; i < 16; i++) {
				var count = this.posts.length + i
      	this.posts.push({
          title: 'title ' + count
        })
      }
    }
  }
});