Vue.js Sort by child value with lodash

Display object items sorted by value

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>
  <ul>
    <strong>Original</strong>
    <li v-for="(user, index) in users">{{ user.name }}, ID: {{ user.id }}, Ix: {{ index }}</li>
    <hr />
    <strong>By Name</strong>
    <li v-for="(user, index) in orderUserByName">{{ user.name }}, ID: {{ user.id }}, Ix: {{ index }}</li>
    <hr />
    <strong>By ID</strong>
    <li v-for="(user, index) in orderUserById">{{ user.name }}, ID: {{ user.id }}, Ix: {{ index }}</li>
    <hr />
    <strong>By ID, Reverse</strong>
    <li v-for="(user, index) in orderUserByIdRev">{{ 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},
    ]
  },
  computed: { // requires lodash’s orderBy
    orderUserByName: function () {
      return _.orderBy(this.users, 'name')
    },
    orderUserById: function () {
      return _.orderBy(this.users, 'id')
    },
    // for double sort, see: https://stackoverflow.com/questions/22928841/lodash-multi-column-sortby-descending
    orderUserByIdRev: function () {
      return _.orderBy(this.users, 'id', 'desc')
    },
  },
  methods: {
    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();
    }
  }
})

// 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";

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

  return text;
}