How to show a message at last page of pagination if no available items in Vuejs?

  javascript, vue.js
currentPage: 1,
  perPage: 3,

  computed: {
    rows() {
      return this.productsList.length;
    },
    paginatedItems() {
      return this.productsList.slice(
        this.currentPage * this.perPage,
        (this.currentPage + 1) * this.perPage
      );
    },
  },
<div class="overflow-auto">
  <div class="product-plp1" v-for="product in paginatedItems" :key="product.key" id="product" :items="productsList" :per-page="perPage" :current-page="currentPage" @click="selectProductDetails(product)">
    <div class="prod-plpimg1"></div>
    <div class="prod-plpimage1name">
      {{ product.key }}
    </div>
    <div class="plpprod-thick">
      <span class="thikness">Thickness</span
                ><span class="ticknesssize">
                  {{ product.masterVariant.attributes[3].value }} mm</span
                >
                <span class="widthplp1"> Width </span
                ><span class="ticknesssize"
                  >{{ product.masterVariant.attributes[4].value }} mm</span
                >
              </div>
              <div class="lengthplpimg1">
                <span class="lengthpl1">Length</span
                ><span class="lengthplpsize1">
                  {{ product.masterVariant.attributes[5].value }} mm -
                  {{ product.masterVariant.attributes[6].value }} mm</span
                >
              </div>
              <div class="plpprodprice">
                ₹ 20,000 - ₹ 50,000<span class="grid-view-ml">/ml</span>
    </div>
    <div class="deliveryimg-name">
      <div class="delivery-img1"></div>
      <span class="deliveryschedule">Delivery in 5-7 days</span>
    </div>
    <div class="line-plpprod1"></div>
    <div class="compare-share">
      <input type="checkbox" id="comapre-plp" name="compare-prod" value="compare-prod" class="check-plp" />
      <label for="comapre-plp" class="compare-plppro">Compare</label>
      <div class="share-img1"></div>
      <label class="share-prod-img1">Share</label>
      <div class="pin-plp-img1"></div>
      <span class="pin-prod-img1">Pin it</span>
    </div>
  </div>
</div>
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>

How to show a message at last page of pagination if no available items in Vuejs?

Basically i want to show message on screen when there is no available items in the pagination "Sorry no products"

For example if page number 8 is the last product items available then i need to show message there.

For that do i need to take a div tag and then i need to link it to pagination, But i am not sure how to start.

Source: Ask Javascript Questions

LEAVE A COMMENT