Переупорядочение индекса на вычисляемом массиве?

Question

Я просмотрел документы и вопросы в Интернете, но не могу выяснить, как изменить порядок индексов моего вычисляемого массива. Есть идеи, с чего начать?

У меня есть массив объектов «предложения», которые я хотел бы заказать по «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)
   });
  }
  }

Answer 1

Попробуйте, отсортировав отфильтрованный массив и вернув его как вычисленное свойство на основе 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;
      })
    }
  }
}