sort by column header in vue.js

Question

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']);

@HassanImam - that did not work. I also took at the ['asc'] and that did not work either. — webdad3, Jul 15 '18 at 16:42
@HassanImam - I will have to put something together. But the array is populated dynamically, so it won't be the same as coming from a DB. — webdad3, Jul 15 '18 at 16:46

score 2 · Accepted Answer · edited Jul 15 '22 at 04:55

_.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.

score 0 · Answer 2 · answered Jul 15 '18 at 18:56

0

Maybe this way?

@click="sortBy('ItemType')"

sortBy (key) {
  this.rowData = _.orderBy(this.rowData, key, 'asc')
},

answered Jul 15 '18 at 18:56

Vladislav Ladicky

2,261
1
11
13

sort by column header in vue.js

2 Answers2