重新排序计算数组上的索引?

时间:2019-01-23 17:00:36

标签: javascript vue.js vuejs2 vue-component

我已经在线搜索了文档和问题,但是找不到如何修改计算数组的索引顺序。关于从哪里开始的任何想法?

在典型的升序或降序选择框中,我有一个按“ 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)
   });
  }
  }

1 个答案:

答案 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;
      })
    }
  }
}