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

Question

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

我认为制作 pageIndexInner 和 itemsPerPageInner 计算属性是最好的方法，但是在编辑这些属性时，我还需要一个 setter?我研究了吸气剂和 setters，但我很难理解它。

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

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

但这是我实际看到的：

我只是不确定所有这些都该去哪里，如果有任何指导，我们将不胜感激。谢谢

Codepen Link: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,0,0.2)

._page-index-inner
  width: 244px
  height: 50px
  border-radius: 4px
  box-shadow: 0 5px 5px rgba(0,0,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>

Answer 1

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>

Answer 2

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

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

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

How to make a proper pagination with Vuejs? Setter not defined error

pagination

vue.js

computed-properties