Question

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

为此，我假设我不确定在Vue中使用'v-for'的最佳方法，即基于将postCount除以perPage的数量来填充正确数量的分页按钮的方法。

例如，如果postCount = 200且perPage = 10，则页面数据变量将等于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
}

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

1 个答案: