<template>
  <section class="container">
    <div>
      <h1 class="title">
        infinite-loading
      </h1>
      // リストを表示する部分
      <ul class="list">
        // 下記のようにv-forでループして変数
        <li class="item" v-for="(item, index) in this.news" :key="index">{{ item + index }}</li>
      </ul>
      // 自動読み込みのブロック 一定の部分までスクロールされると@infinite=で指定したmethodが実行される
      <infinite-loading ref="infiniteLoading" spinner="circle" @infinite="infiniteLoad">
        // ステータスがcompleteに更新されると下記が表示される
        <span slot="no-more">-----検索結果は以上です-----</span>
        // 結果が存在しない場合下記が表示される
        <span slot="no-results">-----検索結果はありません-----</span>
      </infinite-loading>
    </div>
  </section>
</template>
<script>
  import InfiniteLoading from 'vue-infinite-loading';
  export default {
    components: {
      InfiniteLoading
    },
    data() {
      return {
        news: []
      }
    },
      methods: {
      /*
       * infiniteLoad
       * 自動実行されるmethod  
       */
      infiniteLoad() {
        // itemの生成
        for(let i=0;i<20;i++){
          this.news.push("ニュース");
        }
        this.$refs.infiniteLoading.stateChanger.loaded();
        if (this.news.length == 100) {
          this.$refs.infiniteLoading.stateChanger.complete();
        }
      },
    }
  }
</script>
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 100px;
}
.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}
.links {
  padding-top: 15px;
}
ul, ol {
  padding: 0;
  position: relative;
}
ul li, ol li {
  color: black;
  border-left: solid 8px orange;/*左側の線*/
  background: whitesmoke;/*背景色*/
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
  padding: 0.5em;
  list-style-type: none!important;
}
</style>