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

参见更新的小提琴 。