Vue.js - как отсортировать объекты в массиве по определенному свойству и отобразить их с помощью v-for

Question

У меня есть массив с несколькими объектами внутри. Каждый объект содержит несколько свойств.

Я использую метод vue.js v-for, чтобы отобразить его в списке.

Но я не могу сделать это в определенном порядке данного свойства. Я использую эту функцию для сортировки по возрастанию:

    evenNumbers: function () {
      return this.numbers.sort(function (a, b) { return a - b });
    }

Отлично работает с простым массивом, таким как [22, 1, 2, 3, 4, 5]. Но это не работает для таких объектов:

      numbers2: [
      {
        name: 'Alan',
        age: 72
      }, 
      {
        name: 'Thomas',
        age: 32
      }, 
      {
        name: 'Thomas',
        age: 32
      }, 
      {
        name: 'Michal',
        age: 32
      },
    ]
  }

Я хочу отсортировать их по возрасту в порядке возрастания.

В конце я хочу отобразить их внутри свойства li, например, только {{age}}.

Вот фрагмент с моим кодом: https://jsfiddle.net/marektchas/jyznx475/2/

Answer 1

Поскольку теперь у вас есть сложные объекты, сортировка по объекту напрямую не будет работать так, как вы ожидаете (оператор запускает некоторые неявные преобразования, приводящие к NaN для каждого сравнения).

Вы должны выполнить сортировку по определенному свойству, в данном случае age. Итак:

    evenNumbers2: function () {
      return this.numbers2.sort(function (a, b) { return a.age - b.age });
    }

См. обновленная скрипка .