Vue.js - how to sort and objects inside the array by particular property and render it with "v-for"

Question

I have an array with a few objects inside. Each object contains a few properties.

I use vue.js v-for method to render it in the list.

But I cannot render it in the specific order of the given property. I use this function to sort it ascending:

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

It works fine with a simple array like [22, 1, 2, 3, 4, 5]. But it does not work for the objects like this:

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

I want to sort them by the age in the ascending order.

At the end I want to render them inside the li for example only {{ age }} property.

Here is a snippet with my code: https://jsfiddle.net/marektchas/jyznx475/2/

acdcjunior · Accepted Answer · 2019-03-26 20:59:40Z

4

Since you now have complex objects, sorting by the object directly won't work as you expect (the operator runs some implicit conversions resulting in NaN for every comparison).

You must sort by the specific property, in this case, age. So:

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

See updated fiddle.

answered Mar 26, 2019 at 20:59

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marek Has Over a year ago

But how to render now inside the <li> for example only {{ age }} property?

acdcjunior Over a year ago

All you need to do is use the dot notation in the template as well: <li v-for="n in evenNumbers2">{{ n.name }}'s age is {{ n.age }}!</li> see fiddle: jsfiddle.net/acdcjunior/5knh47yg/2

Collectives™ on Stack Overflow

Vue.js - how to sort and objects inside the array by particular property and render it with "v-for"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related