materio-d8/web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue

<template>
  <div id="blabla">
    <div class="loading" v-if="!items.length">
      <span>Loading ...</span>
    </div>
    <div class="cards-list" v-else>
      <ul>
        <li v-for="item in items" v-bind:key="item.uuid">
          <ArticleCard :item="item"/>
        </li>
      </ul>
      <infinite-loading @infinite="getArticles">
        <div slot="no-more">No more results</div>
      </infinite-loading>
    </div>
  </div>
</template>

<script>

import { REST } from 'vuejs/api/rest-axios'
import ArticleCard from 'vuejs/components/Content/ArticleCard'

export default {
  name: "Blabla",
  data() {
    return {
      items:[],
      page:0
    }
  },
  created(){
    this.getArticles()
  },
  methods: {
    getArticles($state){
      REST.get(`/blabla_rest?_format=json&page=${this.page}`, {})
        .then(({ data }) => {
          console.log('blabla REST: data', data)
          if(data.length){
            this.items = this.items.concat(data)
            // console.log('items.length', this.items.length);
            this.page += 1;
            if($state)
              $state.loaded()
          }else{
            if($state)
              $state.complete()
          }
        })
        .catch(( error ) => {
            console.warn('Issue with blabla', error)
            Promise.reject(error)
        })
    }
  },
  components: {
    ArticleCard
  }
}
</script>
<style lang="scss" scoped>
</style>