Фильтр Vue с пагинацией не фильтрует кроме первой страницы - PullRequest
0 голосов
/ 10 сентября 2018

Я довольно новичок в 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)">
            &laquo;
          </button>
        </li>
        <li v-if="pageCount > 0">
          <button class="page-control" :disabled="currentPage === 0" @click="setPage(currentPage-1)">
            &lsaquo;
          </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)">
            &rsaquo;
          </button>
        </li>
        <li v-if="pageCount > 1">
          <button class="page-control" :disabled="currentPage === pageCount"
                  @click="setPage(pageCount)">
            &raquo;
          </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);
  }

Я полагаю, потому что я нарезаю рецепты, фильтр не применяет это (я могу быть совершенно неправ), но я не уверен, как я мог бы разбить на страницы и применить общий фильтр на каждой странице. Любая помощь будет высоко оценен?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...