如何在Vue.js中为bootstrap-vue分页组件配置每页展示的对应商品数据

问题原因&修改方案如下： #

1. 修正分页计算逻辑错误

你当前的paginatedItems计算属性的切片逻辑参数错误，currentPage初始值为1的场景下，起始索引计算规则应为：
起始索引 = (当前页码 - 1) * 每页条数
结束索引 = 当前页码 * 每页条数
修改后的JS代码：

data() {
  return {
    currentPage: 1,
    perPage: 3,
    // 你的productsList定义在此处
  }
},
computed: {
  paginatedItems() {
    return this.productsList.slice(
      (this.currentPage - 1) * this.perPage,
      this.currentPage * this.perPage
    )
  },
  rows() {
    return this.productsList.length
  }
}

2. 修正商品列表遍历数据源

你当前的商品列表v-for遍历的是全量的productsList，所以所有商品都会在同一页展示，需要把遍历的数据源换成分页处理后的paginatedItems，同时删除没用的空遍历节点和冗余属性，修改后的HTML代码：

<div class="overflow-auto">
  <div
    class="product-plp1"
    v-for="product in paginatedItems"
    :key="product"
    id="product"
  >
    <div class="prod-plpimg1"></div>
    <div class="prod-plpimage1name">
      {{ product.key }}
    </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>

修改完成后切换页码会自动触发paginatedItems重新计算，自动渲染对应页的商品数据。

内容的提问来源于stack exchange，提问作者T dhanunjay