如何使用 Vuejs 进行正确的分页？ Setter 未定义错误

如何解决如何使用 Vuejs 进行正确的分页？ Setter 未定义错误

正在处理我正在开发的个人应用程序的 pageNav，但无法正确显示索引。

我认为制作 pageIndexInner 和 itemsPerPageInner 计算属性是最好的方法，但是在编辑它们时，我还需要一个 setter 吗？我已经研究过 getter 和 setter，但我很难理解它。

在没有计算机属性的情况下，点击事件有效，我可以一直达到 itemToal 数量，但索引不匹配。

如果将默认的 pageIndex 更改为 3，我想看：

但这是我实际看到的：

我只是不确定如何处理所有这些，任何指导将不胜感激。谢谢

代码笔链接：https://codepen.io/LovelyAndy/pen/NWbjLGz?editors=1010

Vue 组件代码：

<template>
    <div class="_table-page-nav-wrapper">
    <div @click="back" :disabled="pageIndexInner === 0" class="_arrow-btn">
    <
    </div>
    <div class="_page-index-inner">
      {{ itemsTotal }} Total Items {{ pageIndexInnerStart}} - {{ itemsPerPageInnerStart }} Shown
    </div>
    
    <div @click="forward" class="_arrow-btn">
  >
    </div>
  </div>
</template>

<style lang="sass" scoped>
._table-page-nav-wrapper
  display: flex
  justify-content: center
  align-items: center
  div
    display: flex
    justify-content: center
    align-items: center

._arrow-btn
  width: 50px
  height: 50px
  border-radius: 4px
  Box-shadow: 0 5px 5px rgba(0,0.2)

._page-index-inner
  width: 244px
  height: 50px
  border-radius: 4px
  Box-shadow: 0 5px 5px rgba(0,0.2)
  margin: 0px 20px
</style>

<script>
export default {
  name: 'TablePageNavigation',props: {
    /**
     * passed values can be either 10 or 25 or 50
     */
    itemsPerPage: {
      type: Number,default: 10,validator: (prop) => [10,25,50].includes(prop),},pageIndex: {
      type: Number,default: 0,itemsTotal: {
      type: Number,default: 100,data() {
    return {
      pageIndexInner: this.pageIndex,itemsPerPageInner: this.itemsPerPage,}
  },computed: {
    pageIndexInnerStart() {
      return this.pageIndex + this.itemsPerPage
    },itemsPerPageInnerStart() {
      return this.itemsPerPage + this.itemsPerPage
    },methods: {
    back() {
      if (this.itemsPerPageInner > this.itemsPerPage) {
        this.itemsPerPageInner = this.itemsPerPageInner - this.itemsPerPage
        this.pageIndexInner = this.pageIndexInner - this.itemsPerPage
        const newIndex = this.pageIndexInner
        this.$emit('update:pageIndex',newIndex)
      }
      return
    },forward() {
      if (
        this.itemsPerPageInnerStart + this.itemsPerPage > this.itemsTotal ||
        this.PageIndexInnerStart + this.itemsPerPage > this.itemsTotal
      ) {
        return
      }
      this.pageIndexInnerStart = this.pageIndexInnerStart + this.itemsPerPage
      this.itemsPerPageInnerStart = this.itemsPerPageInnerStart + this.itemsPerPage
    },}
</script>

解决方法

Vuetify

Vuetify pagination Component

如果您习惯使用 UI 库，这可能会有所帮助。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <div class="text-center">
          <v-pagination
            v-model="page"
            :length="6"
          ></v-pagination>
        </div>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',vuetify: new Vuetify(),data () {
      return {
        page: 1,}
    },})
  </script>
</body>
</html>

我今天早上早些时候评论了您的相关问题，并决定根据我之前提到的分页实现创建一个示例。为了更简单的方法，我删除了你的很多计算。我没有处理所有情况，例如如果总项目不是每页项目的倍数，但是如果您喜欢我所做的，您可以自己解决。这是我在使用 Bootstrap 4 的 Vue 沙盒应用程序中开发的单个文件组件的代码。

<template>
  <div class="table-page-navigation">
    <button class="btn btn-primary" @click="back" >Back</button>

    <span>
      {{ itemsTotal }} Total Items {{ pageFirstItem}} - {{ pageLastItem }} Shown
    </span>

    <button class="btn btn-secondary" @click="forward" >Forward</button>
  </div>
</template>

<script>
  export default {
    name: 'TablePageNavigation',props: {
      /**
       * passed values can be either 10 or 25 or 50
       */
      itemsPerPage: {
        type: Number,default: 10,validator: (prop) => [10,25,50].includes(prop),},itemsTotal: {
        type: Number,default: 100,data() {
      return {
        currentPage: 1,computed: {
      numPages() {
        return this.itemsTotal / this.itemsPerPage;
      },pageFirstItem() {
        return (this.currentPage - 1) * this.itemsPerPage + 1;
      },pageLastItem() {
        return this.currentPage * this.itemsPerPage;
      }
    },methods: {
      back() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },forward() {
        if (this.currentPage < this.numPages) {
          this.currentPage++;
        }
      },}
</script>