Question

我对Vue.js很陌生，我建立了一个过滤系统，该过滤系统可以根据类别，主要成分和产品选择来过滤配方。

我为每9个食谱添加了一个分页，但是当我尝试在第二页或第三页上过滤食谱时，过滤器未显示任何食谱项目。这是显示食谱的方式：

<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);
  }

我相信，因为我对食谱进行了切片，所以过滤器无法应用（我可能完全错了），但是我不确定如何在每个页面上进行分页和应用常规过滤器。任何帮助将不胜感激？

具有分页的Vue过滤器仅在首页之外不过滤

0 个答案: