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

Question

分页参考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 分页，但不知道如何开始，请你帮我解决这个问题。谢谢。

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

Answer 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
    );
  }
}