Sort an array in Vue.js
Html side
<div id="string">
<ul>
<li v-for="array in sortArrays(arrays)">{{ array.name }}</li>
</ul>
</div>
Vue js code || Using Lodash
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' }
]
},
methods: {
sortArrays(arrays) {
return _.orderBy(arrays, 'name', 'asc');
}
}
})
- in orderBy function, first argument is array, 2nd argument is key (name / sex) 3rd argument is order (asc / desc)
with arrow functions es6:
sortedArray(){
return this.arrays.sort((a, b) => a.name - b.name );
}
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.