vue.js 分页错误计算答案

【问题标题】：vue.js pagination mis calculationvue.js 分页错误计算
【发布时间】：2019-11-16 06:46:12
【问题描述】：

在我的应用程序中，我有一些分页代码，它根据来自 REST API 的数据计算分页。当我添加页面时，它是从第 0 页而不是从 1 计算的，所以它说 0 of 9，当它到最后它说 8 of 9，当它应该说 1 of 9 和 9 of 9 在结尾。到目前为止，我的代码是：

HTML

<p>Page {{page}} of {{pageCount}}</p>

data: function() {
    return {
      page: 0
    };
  },

computed: {
    pageCount() {
      let l = this.result.length,
        s = this.size;
      return Math.floor(l / s);
    },
    paginated() {
      const start = this.page * this.size,
        end = start + this.size;
      return this.result.slice(start, end);
    }
  },

有什么想法吗？可能是我计算math.floor方法不对？

【问题讨论】：

在我看来，您的页面是 0 索引，而不是 1 索引。页数是正确的，但您是从 0 开始的。有什么理由不能在视图部分添加 1 吗？
如果我更改page: 1，则分页结果从第 1 页开始
它将从 1 of 9 开始，但在上一个按钮上也有 0 的结果
对不起，我不知道 Vue，但无论如何，我建议不要更改 page: 0 的值，而只是向用户显示的内容。
第 {{page + 1}} 页，共 {{pageCount}}
这可行吗？
当我尝试之前它不起作用，但现在已经起作用了，你能提交作为答案，我可以接受。

标签： javascript vue.js vuejs2

【解决方案1】：

据我了解，您的 pageCount() 方法是正确的，因为您确实有 9 页，所以 math.floor 不是问题，您的页面变量是不正确的，但我看不出您从哪里获取该变量但一个简单而粗略的解决方案就是给变量加 1。

【讨论】：

【解决方案2】：

您的页面变量是 0 索引而不是 1 索引。您可以保持这种方式，以便您的分页继续按预期工作，但是在将其输出给用户的地方，您可以简单地添加 1，以便对用户有意义。

<p>Page {{page + 1}} of {{pageCount}}</p>

【讨论】：