I'm using Vue 2.x and according to this documentation - the orderby
directive is no longer available.
I'd prefer not to have to have another JS library, however if I can get lodash to work then I guess that would be ok. I tried several other attempts (link,link) of JS sorting which didn't seem to work at all.
However, I want to be able to click on a table header value and do the sort based off of that value.
My rowData
array is populated via a database call and it looks something like this:
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
What I'm trying to do to start is to order by the ItemType property. In rowData
I have multiple ItemType values (Condition Types, Medical Reference, Synonyms, References etc).
In my table header I have the following:
v-on:click="sortBy('ItemType')"
This is what I have so far (sortKey is not being used yet as ItemType is hardcoded):
sortBy: function (sortKey) {
var vm = this;
_.orderBy(vm.rowData, ['ItemType'], ['asc']);
},
At this point in time, I am NOT seeing any sorting. To be honest, I'm not sure if it is my Vue code or the lodash code.
Let me know if you need to see more of my array or any other code. I'd really like to be able to sort by column head (currently there are 7 other headers that I need to sort by).
Edit:
I've also tried this (which didn't change anything):
return _.orderBy(vm.rowData, ['ItemType']);
_.orderBy
does not mutate the array in place, it returns a new array, so vm.rowData
itself is not sorted and Vue doesn't react to any changes (since there were none). Even if _.orderBy
did mutate the array in place Vue still wouldn't be able to track the changes because it can't see array accesses (one of Vue's reactivity pitfalls, docs: https://v2.vuejs.org/v2/guide/list.html#Caveats). In this situation what you need to do is:
sortBy: function (sortKey) {
let vm = this;
vm.$set(vm, 'rowData', _.orderBy(vm.rowData, ['ItemType'], ['asc']);
},
And that should work.