Pagination in vue.js framework

Question

Error with Pagination in vue.js framework in view page, The Pagination bar is working fine but I have 50 records on the same page. The Pagination bar is 17 => 50/3 . The Post is displayed in div section not in Table.

<template>
  <div class="blog">
    <h2>{{ pageDescreption }}</h2>
    <hr />

    <div class="alert alert-success" role="alert" v-text="alertTitel"></div>

    <div class="row">
      <div class="col-md-8">
        <div class="posts-area">
          <PostList
            id="PostList"
            v-for="post in posts"
            :key="post.id"
            :post="post"
            :current-page="currentPage"
            :per-page="perPage"
          />
          <div class="overflow-auto">
            <b-pagination
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="PostList"
            ></b-pagination>

            <p class="mt-3">Current Page: {{ currentPage }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PostList from "@/components/Blogs/PostList.vue";
import PostJson from "../Gatewaye/post.json";

export default {
  data: function() {
    return {
      pageName: "blog",
      pageDescreption: "This is an Blog page",
      alertTitel: "List of all Posts",
      posts: PostJson, // array of posts [50 records]
      perPage: 3,
      currentPage: 1
    };
  },
  name: "Blog",
  components: {
    PostList
  },
  computed: {
    rows() {
      return this.posts.length;
    }
  }
};
</script> 

And in Components file Blog.vue is:

<template>
  <div class="PostList">
    <div class="post-container text-left">
      <span class="post-views badge badge-primary" title="Views">{{
        post.views
      }}</span>
      <h3 class="post-title" title="Title">{{ post.title }}</h3>
      <span class="post-date" title="Date">{{ post.date }}</span>
      <p class="post-body">
        {{ post.contant }}
      </p>
      <div class="row">
        <div class="col-sm-6">
          <span class="post-author" title="Auther">{{ post.auther }}</span>
        </div>
        <div class="col-sm-6 text-right">
          <span class="post-category" title="Category">{{
            post.category
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["post"],
  name: "PostList"
};
</script>

The Pagination bar is working fine but I have 50 records on the same page ... Thank you

Answer 1

Use a computed property to slice the post array in the parent component:

computed: {
  paginatedposts() {
    return this.posts.slice(this.perPage*(this.currentPage-1), (this.perPage*(this.currentPage-1))+this.perPage);
  }
}

Now you just need to bind this computed property:

<PostList
 id="PostList"
 v-for="post in paginatedposts"
 :key="post.id"
 :post="post"
/>