我正在创建一个Vue应用程序,其中将显示作业列表,并且此数据来自JSON对象。在此应用程序中,我还添加了过滤功能以及分页功能。所以我到目前为止是:
<div id="app" v-cloak>
<h2>Location</h2>
<select v-model="selectedLocation" v-on:change="setPages">
<option value="">Any</option>
<option v-for="location in locations" v-bind:value="location" >{{ location }}</option>
</select>
<div v-for="job in jobs">
<a v-bind:href="'/job-details-page/?entity=' + job.id"><h2>{{ job.title }}</h2></a>
<div v-if="job.customText12"><strong>Location:</strong> {{ job.customText12 }}</div>
</div>
<div class="paginationBtns">
<button type="button" v-if="page != 1" v-on:click="page--">Prev</button>
<button type="button" v-for="pageNumber in pages.slice(page-1, page+5)" v-on:click="page = pageNumber"> {{pageNumber}} </button>
<button type="button" v-if="page < pages.length" v-on:click="page++">Next</button>
</div>
<script>
var json = <?php echo getBhQuery('search','JobOrder','isOpen:true','id,title,categories,dateAdded,externalCategoryID,employmentType,customText12', null, 200, '-dateAdded');?>;
json = JSON.parse(json);
var jsonData = json.data;
var app = new Vue({
el: '#app',
data() {
return {
//assigning the jobs JSON data to this variable
jobs: jsonData,
locations: ['Chicago', 'Philly', 'Baltimore'],
//Used to filter based on selected filter options
selectedLocation: '',
page: 1,
perPage: 10,
pages: [],
}
},
methods: {
setPages () {
this.pages = [];
let numberOfPages = Math.ceil(this.jobs.length / this.perPage);
for (let i = 1; i <= numberOfPages; i++) {
this.pages.push(i);
}
},
paginate (jobs) {
let page = this.page;
let perPage = this.perPage;
let from = (page * perPage) - perPage;
let to = (page * perPage);
return jobs.slice(from, to);
},
}
watch: {
jobs () {
this.setPages();
}
},
})
computed: {
filteredJobs: function(){
var filteredList = this.jobs.filter(el=> {
return el.customText12.toUpperCase().match(this.selectedLocation.toUpperCase())
});
return this.paginate(filteredList);
}
}
</script>
因此,我遇到的问题是,当用户使用选择输入过滤列表时,我希望更改页面的数量。列表本身会更改,但页面数量不会更改,一旦超过某个点,最终将导致大量的空白页面。
我相信发生这种情况的原因是,根据作业数据对象的长度设置了页面数量。由于那永远不会改变,因此页面的数量也保持不变。我需要做的是,一旦运行setPages方法,就需要清空页面数据数组,然后查看filteredJobs对象并找到其长度,而不是基本作业对象。
filteredJobs过滤是一个计算属性,我不确定一旦过滤后如何获取对象的长度。
编辑:好的,所以我将其添加到setPages方法中:
let numberOfPages = Math.ceil(this.filteredJobs.length / this.perPage);
代替
let numberOfPages = Math.ceil(this.jobs.length / this.perPage);
,我发现它实际上是在抓住filterdJobs的长度,但是由于我在该计算属性上运行了paginate方法,所以说当前filteredJobs数组中只有10个项目,并且只会添加一个分页页面。因此,抓住filterdJobs的长度可能不是最佳方法。可能将数据变量设置为等于过滤后的作业对象可能会更好,并且要把握长度。