我已经在线搜索了文档和问题,但是找不到如何修改计算数组的索引顺序。关于从哪里开始的任何想法?
在典型的升序或降序选择框中,我有一个按“ offer.price.from”排序的“要约”对象数组。
<!-- SORT BY SELECT -->
<select v-model="sortby" >
<option value="ascending"> Sort: Price ascending</option>
<option value="descending"> Sort: Price descending</option>
</select>
<div v-for="offer in filteredOffers" class="grid-4 item hotel hotel-item">
<!-- OFFER CONTENT HERE -->
</div>
computed: {
filteredOffers () {
return this.offers.filter(offer => {
return (offer.island === this.filters.islandFilter || this.filters.islandFilter === 'All') // Island
&& (offer.starrating === this.filters.starRating || this.filters.starRating === 'All') // Star Rating
&& (offer.board === this.filters.boardBasis || this.filters.boardBasis === 'All') // Board Basis
&& (offer.duration === this.filters.duration || this.filters.duration === 'All') // Duration
&& (offer.price.from < this.filters.price) // Price
&& (this.filters.travelby === 'sea' && offer.travel.air === false || this.filters.travelby === 'All') // Sea or Air
// && (this.filters.range.startDate >= offer.dates.start && offer.dates.end <= this.filters.range.endDate)
});
}
}
答案 0 :(得分:2)
尝试对已过滤的数组进行排序,然后根据sortby
数据项将其作为计算的属性返回:
computed: {
filteredOffers() {
let filtered = this.offers.filter(offer => {
return (offer.island === this.filters.islandFilter || this.filters.islandFilter === 'All') // Island
&&
(offer.starrating === this.filters.starRating || this.filters.starRating === 'All') // Star Rating
&&
(offer.board === this.filters.boardBasis || this.filters.boardBasis === 'All') // Board Basis
&&
(offer.duration === this.filters.duration || this.filters.duration === 'All') // Duration
&&
(offer.price.from < this.filters.price) // Price
&&
(this.filters.travelby === 'sea' && offer.travel.air === false || this.filters.travelby === 'All') // Sea or Air
// && (this.filters.range.startDate >= offer.dates.start && offer.dates.end <= this.filters.range.endDate)
});
if (this.sortby == 'ascending') {
return filtered.sort((a, b) => {
return a.price.form - b.price.form;
})
} else {
return filtered.sort((a, b) => {
return b.price.form - a.price.form;
})
}
}
}