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

64 lines
1.4 KiB
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>