Я реализовал фильтрацию и разбиение на страницы, используя Vue / Vuetify. Фильтрация отлично работает на первой странице разбиения на страницы, однако она не работает ни на одной из других страниц моей таблицы. Я не смог найти ответ на аналогичные вопросы здесь. Я ищу помощь, чтобы решить эту проблему.
В основном, текущее поведение фильтрации работает только на первой странице таблицы данных. Если вы щелкнете «Далее» на моей функции разбивки на страницы, чтобы загрузить следующий фрагмент данных, данные будут правильно загружены в таблицу, но мои функции фильтрации больше не будут работать. Допустим, я фильтрую по отраслевому выбору, например, по инжинирингу, фильтрация правильно отображает все инженерные задания на первой странице разбиения на страницы, однако, если бы мне пришлось фильтровать по IndustryChoice на любой из других страниц разбиения на страницы, фильтрация неработай. Это работает только на первом срезе данных пагинации. Мне просто интересно, как я могу решить эту проблему
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>