时间戳

首页 > 解决方案 > Vue.js - 如何通过特定属性对数组中的对象进行排序并使用“v-for”进行渲染

javascript - Vue.js - 如何通过特定属性对数组中的对象进行排序并使用“v-for”进行渲染

问题描述

我有一个数组，里面有一些对象。每个对象都包含一些属性。

我使用 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/

标签： javascriptarrayssortingvue.jsvuejs2

解决方案

由于您现在有复杂的对象，因此直接按对象排序将无法按预期工作（运算符运行一些隐式转换，导致NaN每次比较）。

您必须按特定属性排序，在本例中为age。所以：

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

请参阅更新的小提琴。

推荐阅读