I have and Array of Objects whose elements are randomly ordered. I would like to list the values in a specific order (of the keys).

As an example, the iteration below just lists them:

var vm = new Vue({
  el: "#root",
  data: {
    all: [{
        second: 2,
        third: 3,
        first: 1
      },
      {
        third: 30,
        first: 10,
        second: 20
      }
    ],
  }
})

<script src=".3.3/vue.js"></script>
<div id="root">
  <div v-for="a in all">
    <div v-for="(v, k) in a">{{v}}</div>
  </div>
</div>

I have and Array of Objects whose elements are randomly ordered. I would like to list the values in a specific order (of the keys).

As an example, the iteration below just lists them:

var vm = new Vue({
  el: "#root",
  data: {
    all: [{
        second: 2,
        third: 3,
        first: 1
      },
      {
        third: 30,
        first: 10,
        second: 20
      }
    ],
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  <div v-for="a in all">
    <div v-for="(v, k) in a">{{v}}</div>
  </div>
</div>

Is this possible to drive the iteration so that it is ordered according to a list of keys (["first", "second", third"]) which would yield

1
2
3
10
20
30

• javascript
• vue.js

• Why can't you just define them in the order you want? – Jonathan Bartlett Commented Jun 1, 2017 at 13:03
• @JonathanBartlett: because I will get them from outside my program (via AJAX) and the order is undefined. – WoJ Commented Jun 1, 2017 at 13:04
• 1 From Vue documentation: When iterating over an object, the order is based on the key enumeration order of Object.keys(), which is not guaranteed to be consistent across JavaScript engine implementations. Basically it's not possible without puted properties since Vue is using native for-in semantic which does not guarantee any ordering. – Evan Sebastian Commented Jun 1, 2017 at 13:05

4 Answers 4

I don't know vue but you can do it like this in javascript.

<div v-for="k in Object.keys(a).sort()">{{k}}:{{a[k]}}</div>

Also note that alphabetic sorting accidentally fits into your need, but you might need a custom sort function like sort((a,b)=>order.indexOf(a)-order.indexOf(b)) with your custom order order: ["first","second","third","fourth"] which may not be alphabetic.

var vm = new Vue({
  el: "#root",
  data: {
    all: [{
        second: 2,
        third: 3,
        first: 1,
        fourth: 4
      },
      {
        third: 30,
        first: 10,
        second: 20,
        fourth: 40
      }
    ],
    order: ["first","second","third","fourth"]
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  <div v-for="a in all">
    <div v-for="k in Object.keys(a).sort((a,b)=>order.indexOf(a)-order.indexOf(b))">{{k}}:{{a[k]}}</div>
    <hr/>
  </div>
</div>

You can put your list of sorted keys in an array and v-for over that instead.

<div v-for="a in all">
  <div v-for="key in presortedListOfKeys">
    {{a[key]}}
  </div>
</div>

You can use puted properties and get the all sorted first before iteration through them.

In Module 5 of my Vue.js Training course, I actually discuss this. At first glance, the Object.keys approach may seem like the correct approach. However, different JavaScript engines return the properties in different orders. For that reason, you can't rely on it.

In Vue.js, you could either a) sort your Array when the Array gets populated b) Create a "puted property" or c) Create a sort method that you can pass your property into.

In my opinion, you should use option b. The reason why is because puted properties get cached. By doing this, you'll only run your sort code once. However, if you were to use option c the sort would execute during each iteration. Option a is a possibility, but I don't know enough about your scenario to know if this is a real option or not.