如何在Vuejs中为每个分页号添加项目？

Posted 2023-02-22

【中文标题】如何在Vuejs中为每个分页号添加项目？

【英文标题】：How to add items to each pagination number in Vuejs?

【发布时间】：2021-08-04 11:39:39

【问题描述】：

分页参考https://bootstrap-vue.org/docs/components/pagination

 currentPage: 1,
 perPage: 3,
 
  computed: 

paginatedItems() 
  return this.productsList.slice(
    this.currentPage * this.perPage,
    (this.currentPage + 1) * this.perPage
  );

    rows() 
      return this.productsList.length;
    ,
  ,

          <div class="overflow-auto">
        <div v-for="(item, key) in paginatedItems" :key="key"></div>

            <div
              class="product-plp1"
              v-for="product in productsList"
              :key="product"
              id="product"
              :items="productsList"
              :per-page="perPage"
              :current-page="currentPage"
            >
              <div class="prod-plpimg1"></div>
              <div class="prod-plpimage1name">
                 product.key 
              </div>
              
              </div>
            </div>
          </div>
          <b-pagination
            v-model="currentPage"
            :total-rows="rows"
            :per-page="perPage"
            aria-controls="my-table"
          ></b-pagination>

          <p class="mt-3">Current Page:  currentPage </p>

如何为上述代码添加分页。我有 v-for 中可用的产品列表，现在我想添加 bootstrap-vue 分页。并在每个页码中显示产品。像 1.2.3，...

添加了 bootstrapvue 分页，但不知道如何开始，请你帮我解决这个问题。谢谢。

注意：- 因为我可以在一个地方查看所有产品列表，所以需要在每个页码中显示项目。

【参考方案1】：

与 <b-table> 不同，它知道将 :items 渲染为其行，将 :items 传递给普通 DOM 元素

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

什么都不做。你最终得到一个<div> 和:items，但它不知道如何处理它们。

对于普通的 DOM 元素，您必须自己遍历列表：

<div v-for="(item, key) in paginatedItems" :key="key">
   ...item specific stuff here...
</div>

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

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

此外，您必须根据currentPage 和perPage 将computed 中的paginatedItems 定义为项目的当前子部分：

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

【讨论】：

感谢您的回答。我已经进行了更改，但我仍然无法明智地选择页面中的项目。在计算属性中我做了更改，但是对于这个 v-for="product in productsList" 我需要用 v-for="(item, key) in paginatedItems" 替换：key="key" 还是写一个单独的 div .如果我错了，请纠正我。

我已经编辑了我的问题代码，请你看一次。

您必须将v-for="product in productsList" 替换为v-for="product in paginatedItems"。这就是我的意思，你不应该创建一个不同的、空的迭代。删除它。另外，不要使用对象作为键。使用原始值（字符串、数字）（例如：:key="product.id"）。如果您需要我的帮助以使其正常工作，请使用您所拥有的在 codesandbox.io 上创建一个minimal reproducible example。您到目前为止发布的内容不能用于创建工作示例，因为您缺少组件 <script> 并且我不知道其中有什么。

另外，您从组件<script> 发布的位不是有效的语法。缺少逗号很容易破坏您的应用程序，我不知道您是否在实际实现中缺少它，或者仅仅是因为您没有正确复制/粘贴。所以请在codesandbox.io上创建一个runnable minimal reproducible example（这很简单），将你的组件内容放在App.vue中，我会看看。

现在它正在使用您更新的答案。感谢您的努力，感谢您的时间。 :)