Re-ordering the index on a computed array?

Question

I've searched through the docs and questions online but can't find out how to modify the index order of my computed array. Any idea on where to start?

I have an array of 'offers' objects that I would like to order by 'offer.price.from' in the typical ascending or descending select box.

  <!-- 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)
   });
  }
  }

Boussadjra Brahim · Accepted Answer · 2019-01-23 17:35:28Z

2

Try this by sorting the filtered array and returning it as a computed property based on sortby data item :

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

answered Jan 23, 2019 at 17:35

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt B Over a year ago

Thank you!! Small typo on the 'price.from' but once corrected it works perfectly :) Much appreciated.

Collectives™ on Stack Overflow

Re-ordering the index on a computed array?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related