vue-infinite-loading

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    <script src="//code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="//unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="app">
      <table>
        <tr v-for="(item, $index) in list" :key="$index">
          <td><a :href="item.url">{{item.title}}</a></td>
        </tr>
      </table>
      <infinite-loading @infinite="infiniteHandler"></infinite-loading>
      </div>
    <script src="script.js"></script>
  </body>
</html>



Vue.use(window.VueInfiniteLoading);
const api = 'https://qiita.com/api/v2/items'
var app = new Vue({
  el: '#app',
  data() {
    return {
      page: 1,
      list: [],
    }
  },
  methods: {
    infiniteHandler($state) {
      axios.get(api, {
        params: {
          page: this.page,
          per_page: 10
        },
      }).then(({ 
        data
      }) => {
        if (data.length)
        {
          this.page += 1
          app.list.push(...data)
          $state.loaded()
        }
        else
        {
          $state.complete()
        }
      }).catch((err) => {
        alert(err);
        $state.complete()
      })
    }
  }
})

/* Styles go here */