我正在尝试从计算属性中获取一个数组,并将其添加到Vue应用程序中的data属性中。我这样做的原因是我正在调用的方法,我需要该计算属性中数组的长度。所以我有:
var app = new Vue({
el: '#app',
data() {
return {
//assigning the jobs JSON data to this variable
jobs: jsonData,
jobsFiltered: //this is where the computed property variable should go.
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);
},
},
computed: {
filteredJobs: function(){
var filteredList = this.jobs.filter(el=> {
return el.customText12.toUpperCase().match(this.selectedLocation.toUpperCase())
});
return this.paginate(filteredList);
}
}
})
所以我需要做的是我需要将JobsFiltered的数据变量设置为filteredList的计算属性中的变量。我需要这样做的原因是在setPages方法的numberOfPages变量中添加了filteredList数组的长度:
let numberOfPages = Math.ceil(this.jobs.length / this.perPage);
所以在说this.jobs.length的地方,我实际上需要获取filteredList数组的长度,并且我不确定当我试图获取其长度的数组是计算属性时该怎么做。
编辑:添加更多的清晰度,我在计算属性中的filteredJobs函数中的filteredList变量上运行paginate方法。因此,该操作是在该filteredList变量上运行slice方法,并且一次只给我10个数组项。因此,当我执行this.filteredJobs.length
时,它会看到长度为10,而没有得到完整长度。当我实际上需要在运行slice方法之前需要数组的长度时。