Сортировать отфильтрованный массив с функцией более высокого порядка в вычисляемых свойствах [vue .js]

Question

Я хочу переключаться между различными методами сортировки для сортировки массива по номерам, датам и заголовкам и т. Д.

Я хочу сохранить все методы сортировки в созданном хуке как функции более высокого порядка:

created () {
    this.sortings = [
      {
        asc: (img1, img2) => img2[this.sortBy] - img1[this.sortBy],
        desc: (img1, img2) => img1[this.sortBy] - img2[this.sortBy],
        compare: (a, b) => a.ratio - b.ratio
      }
    ]
}

мое вычисленное свойство выглядит следующим образом:

  computed: {
    resultsFiltered () {
        return this.imgData.filter(...).sort(this.sortings[this.sortMethod])
      }
    }
  },

Моя цель - переключить сортировку, изменив sortMethod в объекте данных:

data () {
  return {
   sortMethod: "compare" // or "asc", "desc",
   sortBy: "ratio" // or "date", "title", "filesize", ...
 }
}

Как могу ли я получить функцию высшего порядка в 'these.sortings' для сортировки моего вычисленного свойства?

Кроме того, я не знаю, как передать параметры в функции сортировки: /

I надеюсь, вы можете помочь мне, спасибо!

Answer 1

Array.prototype.customSort = function (key, order='asc') {
  let arrayOfObject = [...this]
  let compare = (a,b) => {
    if (a[key] < b[key]) {
      return order === "asc" ? -1 : 1;
    }
    if (a[key] > b[key]) {
      return order === "asc" ? 1 : -1;
    }
    return 0
  }
  return arrayOfObject.sort(compare)
}

new Vue({
  el: '#app',
 
  data: {
    filteredArray: [
      { serialNo: 1, date: '1994-12-20', title: 'big title' },
      { serialNo: 2, date: '1994-12-22', title: 'small title' },
      { serialNo: 3, date: '1993-12-20', title: 'large title' },
      { serialNo: 4, date: '1992-12-20', title: 'mid title' },
      { serialNo: 5, date: '1991-12-20', title: 'great title' },
      { serialNo: 6, date: '1994-10-20', title: 'awesome title' }
    ],
    currentKey: 'serialNo',
    currentOrder: 'asc'
  },
  
  computed: {
    getSortedFilteredArray () {
      return this.filteredArray.customSort(this.currentKey, this.currentOrder)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <!-- CHOOSE KEY TO SORT -->
  <span>Select key: </span>
  <button @click="currentKey = 'serialNo'">serialNo</button> | 
  <button @click="currentKey = 'date'">date</button> | 
  <button @click="currentKey = 'title'">title</button>
  <br/>
  
  <!-- CHOOSE ORDER TO SORT -->
  <span>Select order: </span>
  <button @click="currentOrder = 'asc'">asc</button> |
  <button @click="currentOrder = 'desc'">desc</button>
  <br/>
  
  <!-- SELECTED SORT / ORDER -->
  <span>Current key : {{ currentKey }}</span> |
  <span>Current order : {{ currentOrder }}</span>
  
  <!-- SORTED RESULT -->
  <ul>
    <li 
      v-for="(obj, i) in getSortedFilteredArray"
      :key="i"
    >
      {{ obj }}
    </li>
  </ul>
</div>

Answer 2

Чтобы реактивность работала, вы должны поместить this.sortings в раздел данных. Также вам нужно исправить this.sortings, если вы хотите, чтобы он работал как словарь:

this.sortings = {
        asc: (img1, img2) => img2[this.sortBy] - img1[this.sortBy],
        desc: (img1, img2) => img1[this.sortBy] - img2[this.sortBy],
        compare: (a, b) => a.ratio - b.ratio
      }

Параметры функции сравнения передаются методом сортировки массива.