时间戳

首页 > 解决方案 > vue.js 框架中的分页

vue.js - vue.js 框架中的分页

问题描述

视图页面中的 vue.js 框架中的分页错误，分页栏工作正常，但我在同一页面上有 50 条记录。分页栏是 17 => 50/3 。帖子显示在 div 部分而不是在表格中。

<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>

在组件文件 Blog.vue 中是：

<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>

分页栏工作正常，但我在同一页面上有 50 条记录...谢谢

标签： vue.jsbootstrap-4pagination

解决方案

使用计算属性对post父组件中的数组进行切片：

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

现在你只需要绑定这个计算属性：

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

推荐阅读