如何在带有分页的列表末尾的一些项目旁边显示消息

Question

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">
</div>
</div>
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>

如果Vuejs中没有可用的项目，如何在分页的最后一页显示消息？

基本上，当分页"中没有可用项目时，我想在屏幕上显示消息；抱歉没有产品">

例如，如果第8页是最后一个可用的产品项目，那么我需要在那里显示消息。

为此，我需要获取一个div标记，然后将其链接到分页，但我不确定如何开始。

Answer 1

首先，如果这个页面上没有产品，就不应该有页面。

尽管如此，如果你想做到这一点，以下是如何做到的：

1. 检查您的列表中是否有任何项目，如果有-显示列表
2. 检查您的列表中是否没有项目并显示消息

<template>
<div>
<div v-if="list.length">
<div v-for="item in list" :key="item">{{ item }}</div>
</div>
<div v-if="!list.length">No items left</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [], // empty list indicates no items on the page
};
},
};
</script>

此外，有些人更喜欢使用v-else(文档(而不是v-if="!list.length"