Post.js

<template>
  <q-page ref="timeline" class="bg-grey-6 q-pt-xs">
    <div class="q-mb-sm">
      <q-banner v-show="postsCollection.length === 0 && !posts.loading && !newPost.loading" class="text-center text-pink-14 bg-white">
        There are no posts yet, be the first.
      </q-banner>
      <Post v-if="newPost.loading" :ajaxLoader="newPost.loading" :post="newPost.payload"></Post>
      <q-infinite-scroll @load="onLoad" :offset="500" ref="infiniteScroll">
        <Post v-for="post in filterPostsByGroup" v-bind:key="post.id" :post="post"></Post>
        <template v-slot:loading>
          <div class="row justify-center">
            <q-spinner-dots color="primary" size="40px" />
          </div>
        </template>

      </q-infinite-scroll>
    </div>

    <CreateAPostDialog />
  </q-page>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Post from '../components/Post'
import CreateAPostDialog from '../components/CreateAPostDialog'

export default {
  components: {
    Post,
    CreateAPostDialog
  },
  data () {
    return {
      left: true,
      right: true,
      showEmojis: false,
      showCreatePostDialog: false,
      postData: [],
      noPostHover: false,
      clientHeight: 500
    }
  },

  async beforeMount () {
    this.clearPostCollection()
  },

  mounted () {
    this.$nextTick(() => {
      this.clientHeight = this.$el.clientHeight
    })
  },

  computed: {
    ...mapState('user', [
      'authenticateUser'
    ]),

    ...mapState('post', [
      'postsCollection',
      'posts',
      'newPost'
    ]),

    filterPostsByGroup () {
      return this.postsCollection.filter(post => {
        return 2
      })
    }
  },

  methods: {
    ...mapActions('post', [
      'clearPostCollection',
      'clearActivePost'
    ]),

    async onLoad (index, done) {
      console.info('LOAD_POST_START', index)
      const params = {
        page: index,
        offset: (index - 1) * 10,
        limit: 10
      }
      await this.$store.dispatch('post/fetchPosts', params)
        .then(response => {
          this.actionErrorHandler(response)
          if (response.current_page === response.last_page && this.$refs.infiniteScroll) {
            this.$refs.infiniteScroll.stop()
          }
          done()
          console.info('LOAD_POST_FINISHED', response)
        })
    },

    beforeDestroy () {
      this.$q.loading.hide()
    }
  }
}