Как отсортировать вычисляемое свойство в vue.js

Question

Я не знаю, как отсортировать уже вычисленный массив результатов.

В Vue я фильтрую изображения по их соотношению. Теперь я хочу отсортировать индивидуальные результаты по дате, имени или тому, что я могу отсортировать.

Я попытался отсортировать массив с помощью метода, но это решение не выполняет автоматическую перерасчет и динамически отображает отсортированные результаты. .

  data() {
    return {
      results: [],
      imgProperties: {
        imgId: [],
        imgRatio: [],
        imgCreateDate: []
      }
    };
  },
  computed: {
    resultsFiltered() {
      if (this.sliderVal == 0) {
        return this.results;
      } else {
        const obj = [];
        const arr = [];
        for (let i = 0; i < this.ratioIndeces.length; i++) {
          const element = this.ratioIndeces[i];
          obj.push(this.results[element]);
          arr.push(this.imgProperties.imgRatio[element]);
        }
        return obj;
      }
    }
  },

Здесь нет подходов к сортировке.

Я хотел бы знать, как и с чего начать.

В примере кода показан фрагменттекущая структура. Соотношение рассчитывается по методикам.

Я бы хотел отсортировать массив по imgCreateDate и imgRatio.

Answer 1

Пример сортировки по imgRatio:

<p v-for="result in resultsFiltered | orderBy 'imgRatio'">{{ result.imgRatio }}</p>

или

<p v-for="result in resultsFiltered">{{ result.imgRatio }}</p>

computed: {
    resultsFiltered() {
      if (this.sliderVal == 0) {
        return this.results.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      } else {
        const obj = [];
        const arr = [];
        for (let i = 0; i < this.ratioIndeces.length; i++) {
          const element = this.ratioIndeces[i];
          obj.push(this.results[element]);
          arr.push(this.imgProperties.imgRatio[element]);
        }

        return this.obj.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      }
    }
  },

Для Vue2 вы можете ссылаться на здесь

Answer 2

Если ваше вычисляемое свойство использует свойство данных для управления сортировкой, вы можете сделать это следующим образом. Сначала я создал данные, которые включают в себя мои исходные, несортированные данные и текущую сортировку:

  data: {
    origItems:[
      {name:'ray', age:10},
      {name:'apple', age:20},
      {name:'zula', age:9},
    ],
    sortType:''
  },

Затем я построил мои вычисленные значения для возврата на основе sortType:

  computed:{
    items() {
      if(this.sortType === '') return this.origItems;
      if(this.sortType === 'name') {
        return this.origItems.sort((a,b) => {
          if(a.name < b.name) return -1;
          if(a.name > b.name) return 1;
          return 0;
        });
      }
      if(this.sortType === 'age') {
        return this.origItems.sort((a,b) => {
          if(a.age < b.age) return -1;
          if(a.age > b.age) return 1;
          return 0;
        });
      }
    }

Это можетвероятно, будет написано более жестко. Я использовал этот макет для тестирования:

<div id="app" v-cloak>
  <button @click="sort('name')">Sort by Name</button>
  <button @click="sort('age')">Sort by Age</button>
  <ul>
    <li v-for="item in items">{{ item.name}} - {{ item.age }}</li>
  </ul>
</div>

Вы можете увидеть онлайн пример этого здесь: https://codepen.io/cfjedimaster/pen/eYYMVWr?editors=1011