I've recently upgraded to Vue 2.x and found out that the orderby directive is no longer supported as per this documentation.
I'm trying to avoid adding another JavaScript library, but if using lodash is the only option, I'm willing to give it a shot. I've attempted other methods of JS sorting from various sources (link, link), with no success.
The goal is to enable sorting by clicking on the table header value.
The rowData array is fetched from the database and has this structure:
rowData:Array[79]
0:Object
ActiveDate:"06/25/2018"
CountryId:10
ExportedDate:""
ExportedStatus:"0"
Id:1751
ItemType:"Condition Types"
LogId:72843
ModifiedDate:"06/25/2018"
Name:"GenericNameGoesHere"
ParentTable:"tableNameGoesHere"
Region:"Home Office"
Type:"CI"
TypeId:123
selectedExport:false
Initially, I want to sort the array based on the ItemType property which has various values like Condition Types, Medical Reference, Synonyms, References, etc.
The table header setup includes:
v-on:click="sortBy('ItemType')"
Current implementation of the sorting method (sortKey is hardcoded for ItemType):
sortBy: function (sortKey) {
var vm = this;
_.orderBy(vm.rowData, ['ItemType'], ['asc']);
},
Unfortunately, the sorting is not working at the moment. I'm unsure if it's an issue with my Vue code or the lodash code.
If you require more information or code snippets, please let me know. I'm eager to implement sorting for all table headers (currently 7 others).
Edit:
I also attempted the following (without any changes to the sorting behavior):
return _.orderBy(vm.rowData, ['ItemType']);