Skip to content

Instantly share code, notes, and snippets.

@nonoesp
Created July 15, 2021 16:49
Show Gist options
  • Save nonoesp/68982463474d23f98da09daee85e9e45 to your computer and use it in GitHub Desktop.
Save nonoesp/68982463474d23f98da09daee85e9e45 to your computer and use it in GitHub Desktop.
A simple Vue component (that uses Lodash) to sort a list of items.
let app = new Vue({
el: '.js--app',
data: {
sortBy: ['id'],
orderBy: ['desc'],
sketches: [
{ id: 0, name: 'Sketch 1' },
{ id: 1, name: 'Sketch 2' },
{ id: 2, name: 'Sketch 3' },
{ id: 3, name: 'Sketch 4' }
]
},
computed: {
sortedSketches: function() {
// return this.sketches;
return _.orderBy(this.sketches, this.sortBy, this.orderBy);
}
},
methods: {
sortArrow: function() {
return this.orderBy[0] == 'asc' ? `↑` : `↓`;
},
sort: function() {
console.log(`Clicked`);
if (this.orderBy[0] == 'asc') {
this.orderBy = ['desc'];
} else {
this.orderBy = ['asc'];
}
this.$forceUpdate();
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment