Я довольно новичок в Vue.js, я построил систему фильтрации, которая фильтрует рецепты по категориям, основным ингредиентам и выбору продуктов.
Я добавил разбиение на страницы для каждых 9 рецептов, но когда я попытался отфильтровать рецепты на 2-й или 3-й странице, фильтр не показывает какой-либо элемент рецепта. Вот как отображаются рецепты:
<section class="grid grid--recipes">
<div class="container">
<h3 v-if="filteredItems.length === 0">{{ labels.noMatch }}</h3>
<div v-for="recipe in paginatedData" class="recipe-card">
<a :href="`${appUrl}/recipe/${recipe.slug}`">
<div class="recipe-card__image">
<div></div>
<!-- Temp fix for square images. needs a better way to handle metadata is null-->
<img v-if="recipe.main_image"
:src='twigConditionals.useSquare ? (recipe.main_image.metadata ? recipe.main_image.metadata.crops.square.url : recipe.main_image.url) : recipe.main_image.url'>
<img v-if="!recipe.main_image" :src='placeholderImage'>
</div>
<div class="recipe-card__content">
<div class="recipe-card__title">
<h3 class="type--header-g">{{ recipe.name }}</h3>
</div>
</div>
</a>
</div>
</div>
</section>
и вот как я добавил нумерацию страниц на основе этого урока https://medium.com/@denny.headrick/pagination-in-vue-js-4bfce47e573b
<section class="pagination">
<div class="container">
<ol>
<li v-if="pageCount > 1">
<button class="page-control" :disabled="currentPage === 0" @click="setPage(0)">
«
</button>
</li>
<li v-if="pageCount > 0">
<button class="page-control" :disabled="currentPage === 0" @click="setPage(currentPage-1)">
‹
</button>
</li>
<li v-for="number in pageCount+1">
<button :class="{ 'is-current-page': currentPage === number - 1 }"
@click="setPage(number-1)">{{ number }}
</button>
</li>
<li v-if="pageCount > 0">
<button class="page-control" :disabled="currentPage === pageCount"
@click="setPage(currentPage+1)">
›
</button>
</li>
<li v-if="pageCount > 1">
<button class="page-control" :disabled="currentPage === pageCount"
@click="setPage(pageCount)">
»
</button>
</li>
</ol>
</div>
</section>
Так что я нарезаю все рецепты, как это в вычисляемом разделе:
pageCount() {
let l = this.filteredItems.length,
s = this.size;
return Math.floor(l / s);
},
paginatedData() {
const start = this.currentPage * this.size,
end = start + this.size;
return this.filteredItems.slice(start, end);
}
Я полагаю, потому что я нарезаю рецепты, фильтр не применяет это (я могу быть совершенно неправ), но я не уверен, как я мог бы разбить на страницы и применить общий фильтр на каждой странице. Любая помощь будет высоко оценен?