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

Posted 2023-02-22

【中文标题】Vue.js - 如何按特定属性对数组中的对象进行排序并使用“v-for”进行渲染

【英文标题】：Vue.js - how to sort and objects inside the array by particular property and render it with "v-for"

【发布时间】：2019-08-17 08:42:24

【问题描述】：

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

我使用 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 属性。

这是我的代码的 sn-p： https://jsfiddle.net/marektchas/jyznx475/2/

【参考方案1】：

由于您现在有复杂的对象，因此直接按对象排序不会像您预期的那样工作（运算符运行一些隐式转换，每次比较都会产生NaN）。

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

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

见updated fiddle。

【讨论】：

但是现在如何在 中渲染，例如只有 age 属性？

您需要做的就是在模板中使用点符号：<li v-for="n in evenNumbers2"> n.name 's age is n.age !</li> 参见小提琴：jsfiddle.net/acdcjunior/5knh47yg/2