Vue infinit load

by kabanoki

HTML

<div id="app">
    <h2>リスト:</h2>
    <ol>
        <li v-for="(todo,index) in todos" :key="index">
            {{ todo.text }}
        </li>
    </ol>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-infinite-loading.js"></script>

CSS

li {
  padding:10px;
  border: 1px solid #ddd;
}

Vue

var todos = [];

for(var i=0;i<100;i++)
{
    todos.push({
        text: "コンテンツ" + i, done: false
    });
}

Vue.use(window.VueInfiniteLoading);

new Vue({
    el: "#app",
    data: {
        page: 0,
        todos: []
    },
    methods: {
        infiniteHandler($state) {
            var self = this;
            if (self.todos.length >= this.page) {    
                todos.slice(this.page,this.page+10).filter(function(item){
                    self.todos.push(item);
                    return item;
                });
                this.page += 10;
                $state.loaded();
            } else {
                $state.complete();
            }
        },
    }
});