<template> <div id="blabla"> <div class="loading" v-if="!items.length"> <span>{{ $t('default.Loading…') }}</span> </div> <div class="cards-list" v-else> <ul> <li v-for="item in items" v-bind:key="item.nid"> <ArticleCard :item="item"/> </li> </ul> <infinite-loading @infinite="nextPage"> <div slot="no-more">No more articles</div> </infinite-loading> </div> </div> </template> <script> import ArticleCard from 'vuejs/components/Content/ArticleCard' import { mapState, mapActions } from 'vuex' export default { name: "Blabla", // data() { // return { // items:[], // page:0 // } // }, computed: { ...mapState({ items: state => state.Blabla.items }) }, created(){ if(!this.items.length) this.getItems() }, methods: { ...mapActions({ getItems: 'Blabla/getItems', nextPage: 'Blabla/nextPage' }) }, components: { ArticleCard } } </script> <style lang="scss" scoped> </style>