Javascript 如何向Vuejs中的每个页码添加项目？

分页参考

currentPage:1，
每页：3，
计算：{
paginatedItems（）{
返回此.productsList.slice(
this.currentPage*this.perPage，
（this.currentPage+1）*this.perPage
);
}
行（）{
返回this.productsList.length；
},
}，

{{product.key}}
当前页面：{{currentPage}

与

不同，后者知道将

:items

呈现为行，将

:items

传递给普通DOM元素

<div :items="productsList"></div>

在您的情况下，它可能看起来像：

<div v-for="product in paginatedItems" :key="product.key">
  ...product here...
</div>

---

感谢您的回答。我已经做了更改，但仍然无法在页面中选择项目。在computed属性中，我已经做了更改，但是对于这个v-for=“productsList中的产品”，我是否需要在paginatedItems中替换为v-for=“（item，key）”：key=“key”或写一个单独的div。如果我错了，请纠正我。我已经编辑了我的问题代码，如前所述，你能看一下吗。你必须替换

v-for=“productsList中的产品”

带有

v-for=“paginatedItems中的产品”

。这就是我的意思，你不应该创建一个不同的，空的迭代。去掉那个。另外，不要将对象用作关键点。使用基本值（字符串、数字）（例如：

：key=“product.id”

）。如果您需要我的帮助使其工作，请使用您所拥有的在codesandbox.io上创建一个。到目前为止，您发布的内容无法用于创建工作示例，因为您缺少组件

，我不知道其中包含什么。此外，您从组件

发布的位是无效语法。缺少逗号很容易破坏你的应用程序，我不知道你是在实际实现中缺少它，还是因为你没有正确复制/粘贴。因此，请在codesandbox.io上创建一个可运行的（非常简单），将组件的内容放在

App.vue

中，我来看看。现在，它正在处理您更新的答案。感谢您的努力和时间。：）

<div v-for="product in paginatedItems" :key="product.key">
  ...product here...
</div>

computed: {
  paginatedItems() {
    return this.productsList.slice(
      this.currentPage * this.perPage,
      (this.currentPage + 1) * this.perPage
    );
  }
}