Blabla.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div id="blabla">
  3. <div class="loading" v-if="!items.length">
  4. <span>Loading ...</span>
  5. </div>
  6. <div class="cards-list" v-else>
  7. <ul>
  8. <li v-for="item in items" v-bind:key="item.uuid">
  9. <ArticleCard :item="item"/>
  10. </li>
  11. </ul>
  12. <infinite-loading @infinite="nextPage">
  13. <div slot="no-more">No more articles</div>
  14. </infinite-loading>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import ArticleCard from 'vuejs/components/Content/ArticleCard'
  20. import { mapState, mapActions } from 'vuex'
  21. export default {
  22. name: "Blabla",
  23. // data() {
  24. // return {
  25. // items:[],
  26. // page:0
  27. // }
  28. // },
  29. computed: {
  30. ...mapState({
  31. items: state => state.Blabla.items
  32. })
  33. },
  34. created(){
  35. if(!this.items.length)
  36. this.getItems()
  37. },
  38. methods: {
  39. ...mapActions({
  40. getItems: 'Blabla/getItems',
  41. nextPage: 'Blabla/nextPage'
  42. })
  43. },
  44. components: {
  45. ArticleCard
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. </style>