我使用Vue / Vuetify实现了过滤和分页。筛选在第一个分页页面上可以正常工作，但是，在我表的其他任何页面上都无法使用。我无法从此处类似的问题中找到答案。我正在寻找解决此问题的帮助。
基本上，当前行为是筛选仅在数据表的第一页上起作用。如果单击我的分页功能的下一个以加载下一个数据片段，则数据将正确加载到表上，但是我的过滤功能不再起作用。假设我是按industryChoice进行过滤的，例如，工程，该过滤会在第一个分页上正确显示所有工程作业，但是，如果我要在其他任何分页上对industrialChoice进行过滤，则过滤不会工作。它仅适用于分页数据的第一个剪切。我只是想知道如何解决这个问题
firestore() {
return {
jobs: db.collection('jobs').orderBy('createdAt')
}
},
methods: {
next() {
if (this.currentPage < this.totalPages) {
this.currentPage++
}
},
prev() {
if (this.currentPage > 1) {
this.currentPage--
}
}
},
computed: {
// ************************************
// Pagination
// ************************************
allJobs() {
return Object.keys(this.searchJobs).map(pid => this.searchJobs[pid])
},
filteredJobs() {
return this.allJobs.slice((this.currentPage - 1) * this.postsPerPage, this.currentPage * this.postsPerPage)
},
totalPages() {
return Math.ceil(this.allJobs.length / this.postsPerPage)
},
// ************************************
// Filters
// ************************************
searchJobs() {
// ************************************
// ************ search ****************
// ************************************
if (this.search != '') {
return this.jobs.filter(a_job => {
return a_job.jobTitle.match(this.search.toUpperCase().trim())
})
}
// ************************************
// ********* industryChoice ***********
// ************************************
else if (this.industryChoice != '') {
// levelChoice && rangeChoice
if (this.levelChoice != '' && this.rangeChoice != '') {
return this.jobs
.filter(a_job => {
return a_job.industryType.match(this.industryChoice)
})
.filter(a_job => {
return a_job.levelChoice.match(this.levelChoice)
})
.filter(a_job => {
return a_job.salaryRangeChoice.match(this.rangeChoice)
})
}
// levelChoice && !rangeChoice
else if (this.levelChoice != '') {
return this.jobs
.filter(a_job => {
return a_job.industryType.match(this.industryChoice)
})
.filter(a_job => {
return a_job.levelChoice.match(this.levelChoice)
})
// !levelChoice && rangeChoice
} else if (this.rangeChoice != '') {
return this.jobs
.filter(a_job => {
return a_job.industryType.match(this.industryChoice)
})
.filter(a_job => {
return a_job.salaryRangeChoice.match(this.rangeChoice)
})
}
// !levelChoice && !rangeChoice
else {
return this.jobs.filter(a_job => {
return a_job.industryType.match(this.industryChoice)
})
}
}
// ************************************
// ********** levelChoice *************
// ************************************
else if (this.levelChoice != '') {
return this.jobs.filter(a_job => {
return a_job.levelChoice.match(this.levelChoice)
})
}
// ************************************
// ********** rangeChoice *************
// ************************************
else if (this.rangeChoice != '') {
return this.jobs.filter(a_job => {
return a_job.salaryRangeChoice.match(this.rangeChoice)
})
}
// ************************************
// ************************************
// ************************************
else {
return this.jobs.filter(a_job => {
return a_job.jobTitle.match(this.filterIndustry)
})
}
}
}
}
这是模板中的过滤器
<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>