Vue.js分页时如何在无可用商品项的分页页面显示提示消息

1. 先修正现有分页逻辑问题（必做） #

你当前的paginatedItems计算逻辑存在索引偏差：当currentPage为1时，计算出的切片起始位是1*3=3，会直接跳过前3条商品数据，需要调整起始位计算规则：

currentPage: 1,
perPage: 3,

computed: {
  rows() {
    return this.productsList.length;
  },
  paginatedItems() {
    const startIndex = (this.currentPage - 1) * this.perPage;
    const endIndex = this.currentPage * this.perPage;
    return this.productsList.slice(startIndex, endIndex);
  },
}

2. 新增空状态判断渲染 #

直接通过计算属性paginatedItems的长度判断当前页是否有商品，为空时展示提示即可，修改模板代码如下：

<div class="overflow-auto">
  <!-- 有商品时渲染列表 -->
  <div v-if="paginatedItems.length" class="product-plp1" v-for="product in paginatedItems" :key="product.key" id="product" :items="productsList" :per-page="perPage" :current-page="currentPage">
  </div>
  <!-- 无商品时展示提示 -->
  <div v-else class="empty-tip">
    抱歉暂无商品
  </div>
</div>
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>

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