Vue.js 如何在vue上进行分页客户端？

我试着这样：

（演示和完整代码）

我使用

vuetify

我从这里获得分页：

我在我的组件上添加如下内容：

我是那样做的。当我第一次打开页面时，每页显示5个数据，当我单击第二页时，下一页显示5个数据，我感到困惑。等

我该怎么做呢？

Vuetify只是一个“CSS”，您必须自己完成分页逻辑。你可以参考下面的代码笔

基本上，我更新的是将循环项更改为克隆项（它来自计算属性，因此我可以在这里执行分页逻辑）

---

我看到目前所有项目都在一个数组中，然后循环显示每个项目

有几种方法可以做到这一点。一种方法是通过基于当前分页设置计算的计算属性筛选列表

计算：{
filterItems（）{
const start=this.pagination.page*this.pagination.rowsPerPage-this.pagination.rowsPerPage；
const end=start+this.pagination.rowsPerPage-1；
返回此.items.filter（（项目，索引）=>索引>=开始和索引（&I）
cloneItems() {
        var clone = JSON.parse(JSON.stringify(this.items));
        var startFrom = (this.pagination.page*this.pagination.rowsPerPage)-this.pagination.rowsPerPage;
        return clone.splice(startFrom, this.pagination.rowsPerPage);
    }