Vue.js Sort by child object value

Display object items sorted by child object value with lodash

by Christopher O

HTML

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
  <button @click="addArr()">Add random user</button> <button @click="addArr100()">Add 100</button> <button @click="repyyyy()">Replace key yyyy</button>
  <ul>
    <strong>By ID</strong>
    <li v-for="(user, index) in orderUserById">{{ user.name }}, ID: {{ user.id }}, Ix: {{ index }}</li>
    <hr />
    <strong>By ID2 (desc)</strong>
    <li v-for="(user, index) in orderUserById2Rev"  v-on:click="onClick(user)" v-bind:id="user.id">{{ user.name }}, ID: {{ user.id }}, Ix: {{ index }}</li>
  </ul>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
    "field": 'name',
    "reverse": false,
    "users": [
    	{"name":"aaaa","id":5},
      {"name":"dddd","id":17},
      {"name":"bbbb","id":1},
      {"name":"cccc","id":4},
    ],
    "users2": {
    	"wwww": {"name":"aaaa","id":5},
      "xxxx": {"name":"dddd","id":17},
      "yyyy": {"name":"bbbb","id":1},
      "zzzz": {"name":"cccc","id":4},
    }
  },
  computed: { // requires lodash’s orderBy
    orderUserById: function () {
      return _.orderBy(this.users, 'id')
    },
    orderUserById2: function () { // in desc order
      return _.orderBy(this.users2, 'id')
    },
    // for double sort, see: https://stackoverflow.com/questions/22928841/lodash-multi-column-sortby-descending
    orderUserById2Rev: function () {
      return _.orderBy(this.users2, 'id', 'desc')
    },
  },
  methods: {
  	onClick(itm){
    	console.log('Click: ' + itm.name + ' / ' + itm.id);
    },
    addArr(){
    	// add a random new user with random ID
      this.users.push({"name": randStr(4),"id": randInt(0,50) });
    },
    addArr100(){
    	self = this;
    	for (var i = 0; i < 100; i++)
    		self.addArr();
    },
    repyyyy(){
    	this.users2['yyyy'] = {"name":"bbbb-" + randStr(4),"id": randInt(0,20)};
      //this.users2.yyyy = {"name":"bbbb-" + randStr(4),"id": randInt(0,20)};
    }
  }
})

// helper functions for random data
function randInt(min = 0, max = 10){
    return Math.floor(Math.random()*(max-min+1)+min);
}
function randStr(len = 5) {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var pl = possible.length;

  for (var i = 0; i < len; i++)
    text += possible.charAt(Math.floor(Math.random() * pl));

  return text;
}