Sort an array in Vue.js

Question

How can I sort an array by name or sex before displaying it in a v-for loop? https://jsfiddle.net/rg50h7hx/

<div id="string">   <ul>     <li v-for="array in arrays">{{ array.name }}</li>   </ul> </div> 

// Vue.js v. 2.1.8 var string = new Vue({   el: '#string',   data: {     arrays: [       { name: 'kano',    sex: 'man' },       { name: 'striker', sex: 'man' },       { name: 'sonya',   sex: 'woman' },       { name: 'sindell', sex: 'woman' },       { name: 'subzero', sex: 'man' }     ]   } }) 

Do I have to use a "computed", or whatever?

Answer 1

Yes, an easy way to do this can be create a computed property which can return the sortedArray, like following:

computed: {   sortedArray: function() {     function compare(a, b) {       if (a.name < b.name)         return -1;       if (a.name > b.name)         return 1;       return 0;     }      return this.arrays.sort(compare);   } } 

See working demo.

You can find the documentation of sort here which takes a compareFunction.

compareFunction Specifies a function that defines the sort order. If omitted, the array is sorted according to each character's Unicode code point value, according to the string conversion of each element.