Javascript Vue筛选器仅在第一个分页页上工作

我使用Vue/Vuetify实现了过滤和分页。过滤在第一个分页页面上运行良好，但是在我的表的任何其他页面上都不起作用。我无法从这里类似的问题中找到答案。我正在寻求帮助以解决此问题

基本上，当前的行为是过滤只在数据表的第一页起作用。如果单击“我的分页”功能上的“下一步”以加载下一段数据，则数据将正确加载到表中，但我的筛选功能不再工作。假设我按行业选择过滤，例如，工程，过滤会在第一个分页页面上正确显示所有工程作业，但是，如果我在任何其他分页页面上过滤行业选择，过滤将不起作用。它仅适用于分页数据的第一部分。我只是想知道如何解决这个问题

firestore() {
      return {
        jobs: db.collection('jobs').orderBy('createdAt')
      }
    },

以下是模板中的过滤器

<template>

  <div class="jobboard">
    <!-- ****************************************************** -->
    <v-layout row wrap>
      <!-- ****************************************************** -->
      <!-- ***************** Filters **************************** -->
      <!-- ****************************************************** -->
      <v-flex xs12 sm2 md2 fixed>
        <v-card flat app
                class="lightgrey accent-5"
                wrap>
          <v-layout column fill-height class="pb-5">
            <v-flex fixed class="mt-5">

              <!-- ***** SEARCH *****-->
              <div class="pb-5">
                <v-icon medium left>search</v-icon>
                <input type="text"
                       v-model="search"
                       placeholder="Search Job Titles">
              </div>

              <!-- ***** Industry List *****-->
              <v-select v-model="industryChoice"
                        :items="industryType"
                        menu-props="auto"
                        label="Industry Type"
                        hide-details
                        prepend-icon="domain"
                        single-link
                        class="pb-5"></v-select>

              <!-- ***** Skill Level List *****-->
              <v-select v-model="levelChoice"
                        :items="jobLevel"
                        menu-props="auto"
                        label="Level"
                        hide-details
                        prepend-icon="supervisor_account"
                        single-link
                        class="pb-5"></v-select>

              <!-- ***** Salary List *****-->
              <v-select v-model="rangeChoice"
                        :items="salaryLevel"
                        menu-props="auto"
                        label="Salary Range"
                        hide-details
                        prepend-icon="attach_money"
                        single-link
                        class="pb-5"></v-select>
            </v-flex>
          </v-layout>
        </v-card>
      </v-flex>

      <!-- ****************************************************** -->
      <!-- ********************  Table ************************** -->
      <!-- ****************************************************** -->
      <v-flex xs6 sm8 md8>
        <div v-if="$apollo.loading">Loading...</div>
        <div v-else>

          <v-card wrap app flat v-for="(a_job, idx) in filteredJobs" :key="idx">

            <div class="cardOne">
              <v-hover v-slot:default="{ hover }">

                <v-card :elevation="hover ? 12 : 2" class="mx-auto">

                  <v-layout column wrap :class="`project ${a_job.jobTitle}`">

                    <v-flex xs12 sm12 md12 class="pl-2">

                      <v-tooltip right eager>
                        <v-btn flat small
                               slot="activator"
                               outlined
                               :to="{name:'jobDetails', params:{docid:a_job.id}}"
                               class="pl-2 pt-2">
                          <div class="positionTitle">{{ a_job.jobTitle }}</div>
                        </v-btn>
                        <v-icon small color="white">keyboard_backspace</v-icon>
                        <span>View Details</span>
                      </v-tooltip>

                      <div class="companyName pl-3 pb-1">{{ a_job.coName }}</div>
                      <h3 class="locationSlot pl-3 pb-1">{{ a_job.levelChoice }} | {{ a_job.jobLocation }}</h3>

                    </v-flex>

                    <v-flex xs12 sm12 md12 class="">

                      <div class="text-center pb-2 pl-2">
                        <v-btn small to="/applyforjob" class="applyButton applyBtn " dark>Apply</v-btn>
                      </div>

                    </v-flex>

                  </v-layout>
                </v-card>
              </v-hover>
            </div>
            <v-divider></v-divider>
          </v-card>
        </div>
      </v-flex>

      <!-- ****************************************************** -->
      <!-- ****************************************************** -->
      <v-flex xs6 sm2 md2>

        <v-layout row class="pl-4">
          <v-img class=" pt-4 pl-3 ">
            <img src="../assets/testAd2.png">
          </v-img>
        </v-layout>

      </v-flex>
      <!-- ****************************************************** -->
      <!-- ******************** NEXT BTN ************************ -->
      <!-- ****************************************************** -->

      <v-flex xs4 sm4 md4>
        <div class="text-center pl-pt-4 pb-4">
          <v-btn @click="prev" class="applyButton applyBtn " dark>Prev</v-btn>
          <v-btn @click="next" class="applyButton applyBtn " dark>Next</v-btn>
        </div>
      </v-flex>



      <!-- ***************************************************** -->
      <!-- ******************** Footer 1 *********************** -->
      <!-- ***************************************************** -->
      <v-layout justify-center wrap class=" homeFoot">

        <v-flex xs12 sm12 md12 class="homeBottom pt-3">
          <div class="connectCard homeBottom pb-2">
            <div class="connectCard">
              <img class="text-lg-center px-1" src="../assets/facebookIcon1.png">
              <img class="text-lg-center px-1" src="../assets/linkedinCuteIcon1.png">
              <img class="text-lg-center px-1" src="../assets/twitterCuteIcon2.png">
              <img class="text-lg-center px-1" src="../assets/instagramCuteIcon1.png">
              <img class="text-lg-center  px-1" src="../assets/emailIconCute1.png">
              <p>Company Name, LLC. </p>
            </div>
          </div>
        </v-flex>
      </v-layout>
    </v-layout>

  </div>

</template>

搜索

和模板中的我的表

<template>

  <div class="jobboard">
    <!-- ****************************************************** -->
    <v-layout row wrap>
      <!-- ****************************************************** -->
      <!-- ***************** Filters **************************** -->
      <!-- ****************************************************** -->
      <v-flex xs12 sm2 md2 fixed>
        <v-card flat app
                class="lightgrey accent-5"
                wrap>
          <v-layout column fill-height class="pb-5">
            <v-flex fixed class="mt-5">

              <!-- ***** SEARCH *****-->
              <div class="pb-5">
                <v-icon medium left>search</v-icon>
                <input type="text"
                       v-model="search"
                       placeholder="Search Job Titles">
              </div>

              <!-- ***** Industry List *****-->
              <v-select v-model="industryChoice"
                        :items="industryType"
                        menu-props="auto"
                        label="Industry Type"
                        hide-details
                        prepend-icon="domain"
                        single-link
                        class="pb-5"></v-select>

              <!-- ***** Skill Level List *****-->
              <v-select v-model="levelChoice"
                        :items="jobLevel"
                        menu-props="auto"
                        label="Level"
                        hide-details
                        prepend-icon="supervisor_account"
                        single-link
                        class="pb-5"></v-select>

              <!-- ***** Salary List *****-->
              <v-select v-model="rangeChoice"
                        :items="salaryLevel"
                        menu-props="auto"
                        label="Salary Range"
                        hide-details
                        prepend-icon="attach_money"
                        single-link
                        class="pb-5"></v-select>
            </v-flex>
          </v-layout>
        </v-card>
      </v-flex>

      <!-- ****************************************************** -->
      <!-- ********************  Table ************************** -->
      <!-- ****************************************************** -->
      <v-flex xs6 sm8 md8>
        <div v-if="$apollo.loading">Loading...</div>
        <div v-else>

          <v-card wrap app flat v-for="(a_job, idx) in filteredJobs" :key="idx">

            <div class="cardOne">
              <v-hover v-slot:default="{ hover }">

                <v-card :elevation="hover ? 12 : 2" class="mx-auto">

                  <v-layout column wrap :class="`project ${a_job.jobTitle}`">

                    <v-flex xs12 sm12 md12 class="pl-2">

                      <v-tooltip right eager>
                        <v-btn flat small
                               slot="activator"
                               outlined
                               :to="{name:'jobDetails', params:{docid:a_job.id}}"
                               class="pl-2 pt-2">
                          <div class="positionTitle">{{ a_job.jobTitle }}</div>
                        </v-btn>
                        <v-icon small color="white">keyboard_backspace</v-icon>
                        <span>View Details</span>
                      </v-tooltip>

                      <div class="companyName pl-3 pb-1">{{ a_job.coName }}</div>
                      <h3 class="locationSlot pl-3 pb-1">{{ a_job.levelChoice }} | {{ a_job.jobLocation }}</h3>

                    </v-flex>

                    <v-flex xs12 sm12 md12 class="">

                      <div class="text-center pb-2 pl-2">
                        <v-btn small to="/applyforjob" class="applyButton applyBtn " dark>Apply</v-btn>
                      </div>

                    </v-flex>

                  </v-layout>
                </v-card>
              </v-hover>
            </div>
            <v-divider></v-divider>
          </v-card>
        </div>
      </v-flex>

      <!-- ****************************************************** -->
      <!-- ****************************************************** -->
      <v-flex xs6 sm2 md2>

        <v-layout row class="pl-4">
          <v-img class=" pt-4 pl-3 ">
            <img src="../assets/testAd2.png">
          </v-img>
        </v-layout>

      </v-flex>
      <!-- ****************************************************** -->
      <!-- ******************** NEXT BTN ************************ -->
      <!-- ****************************************************** -->

      <v-flex xs4 sm4 md4>
        <div class="text-center pl-pt-4 pb-4">
          <v-btn @click="prev" class="applyButton applyBtn " dark>Prev</v-btn>
          <v-btn @click="next" class="applyButton applyBtn " dark>Next</v-btn>
        </div>
      </v-flex>



      <!-- ***************************************************** -->
      <!-- ******************** Footer 1 *********************** -->
      <!-- ***************************************************** -->
      <v-layout justify-center wrap class=" homeFoot">

        <v-flex xs12 sm12 md12 class="homeBottom pt-3">
          <div class="connectCard homeBottom pb-2">
            <div class="connectCard">
              <img class="text-lg-center px-1" src="../assets/facebookIcon1.png">
              <img class="text-lg-center px-1" src="../assets/linkedinCuteIcon1.png">
              <img class="text-lg-center px-1" src="../assets/twitterCuteIcon2.png">
              <img class="text-lg-center px-1" src="../assets/instagramCuteIcon1.png">
              <img class="text-lg-center  px-1" src="../assets/emailIconCute1.png">
              <p>Company Name, LLC. </p>
            </div>
          </div>
        </v-flex>
      </v-layout>
    </v-layout>

  </div>

</template>

加载。。。
{{a_job.jobTitle}
键盘退格
查看详细信息
{{a_job.coName}
{{a_job.levelChoice}}{{a_job.jobLocation}
申请
上
下一个
公司名称，有限责任公司

能否请您更新问题，以清楚描述当前行为？目前我们只知道它“不起作用”，这有点模糊。更新。对不起，恐怕还不太清楚。请尽量不使用“不起作用”这个词来写描述。而是描述发生了什么。您的意思是，尝试将筛选器应用到第2页不会改变结果，就好像该筛选器被忽略一样？该筛选器在第二页以及之后的每一页都被忽略。过滤器只在第一页上工作，没有任何问题。我有一种感觉，可能是因为第二页加载的数据在筛选方法中没有更新。您能确认在浏览器控制台中没有看到任何错误吗？