尝试使用 Vue 创建分页按钮？

Question

我正在尝试在我的 Vue 应用程序中创建分页。我试图做到这一点是我在 Vue 中有一个名为 postCount 的数据变量。这将等于从 API 拉回的帖子数量。我还有一个名为 perPage 的数据变量，它设置为 10，因此每页应显示 10 个帖子。然后我要做的是取这两个数据变量并做 postCount 除以 perPage 并得到一个数字。然后我想取那个数字并创建那么多按钮来进行分页。

我假设为此我会在 Vue 中使用“v-for”，只是不确定执行此操作的最佳方法是根据 postCount 除以 perPage 的数字填充正确数量的分页按钮。

例如，如果 postCount = 200 且 perPage = 10，则 pages 数据变量将等于 20，并且将显示 20 个分页按钮。

Answer 1

设置一些合理的默认值。

data: ({
  posts: [],
  pagination: {
    per: 10,
    current: 0,
    total: 0
  } 
})

现在让我们用一个简单的方法找回我们的帖子：

async getPosts() {
  try {
    const { data } = await axios.get('/api/posts')

    this.posts = data.posts
    this.pagination.total = data.posts.length
  } catch (e) {
    // console.log(e)
  }
}

并创建一些计算属性以确定哪些应该是可见的：

computed: {
  postsToShow: {
    get: function() {
      return this.posts.slice(current, per)
    }
  }
}

并更新我们的v-for：

v-for="posts in postsToShow"

现在让我们添加一个选择项来确定一次显示多少个帖子。

<select v-model="postsPerPage">
    <option value="10"> 10 </option>
    <option value="20"> 20 </option>
</select>

并添加适当的getter/setter

computed: {
  postsPerPage: {
    get: function() {
      return this.pagination.per
    },
    set: function(per) {
      this.pagination.per = per
    }
  }
}

以及用于循环浏览页面的按钮：

<a href="#" @click.prevent="nextPage"> Next </a>
<a href="#" @click.prevent="previousPage"> Previous </a>

及其对应的功能：

nextPage() {
  this.pagination.current = (this.pagination.current * this.per < this.total) ? this.current++ : this.current
}

previousPage() {
  this.pagination.current = (this.pagination.current > 0) ? this.pagination.current-- : 0
}

让我们显示用于直接导航到特定页面的按钮：

<a href="#" v-for="p in (pagination.total / pagination.per)" v-text="p" @click.prevent="setCurrent(p)"></a>

以及我们对应的方法：

setCurrent(page) {
  this.paginagation.current = page
}