[Vuejs]-How to render ordered list base on the specific properly of an object?

by

3👍

✅

While there may be some inline method to invoke on the v-for iterator, the docs recommend using a simple JS sort, as in

array.sort((a,b) => a.url_num - b.url_num)

You can tack it onto the data array directly (as shown below) or create a separate array for it

let obj = {
  objects: [{
      "id": 275,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 10,
      "max_iteration": 0
    },
    {
      "id": 274,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 9,
      "max_iteration": 0
    },
    {
      "id": 273,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 8,
      "max_iteration": 0
    },
    {
      "id": 272,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 7,
      "max_iteration": 0
    },
    {
      "id": 271,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 6,
      "max_iteration": 0
    },
    {
      "id": 270,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 5,
      "max_iteration": 0
    },
    {
      "id": 269,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 4,
      "max_iteration": 0
    },
    {
      "id": 268,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 3,
      "max_iteration": 0
    },
    {
      "id": 267,
      "group_id": 119,
      "url": "https://cnn.com",
      "url_num": 2,
      "max_iteration": 0
    },
    {
      "id": 266,
      "group_id": 119,
      "url": "https://www.apple.com",
      "url_num": 1,
      "max_iteration": 2
    }
  ].sort((a, b) => a.url_num - b.url_num)
}

console.log(obj)

Leave a comment