Vue.js Sorting using a underscore sortBy

Question

Trying to implement a sortBy method on a Vue component. Here's what I have so far.

var studentTableComp =  {
    template: '#studentTable',
    data: function () {
        return {
            students: data,
            show: true,
            columns: [
                'id',
                'candidateType',
                'complete'
            ]
        }
    },
    methods: {
        sortBy: function (sortKey, e) {
            e.preventDefault();
            _.sortBy(this.students.students, sortKey);
        }
    },
}

And I can see that the sortBy function is being hit, and that the parameters sortKey are being sent correctly from the template, but the problem seems to be with the _.sortBy function doesn't have any effect on the this.students.students array.

Any ideas why it doesn't working.
I've tried the _.sortBy method using Underscores example array, and it works fine, but I think something happens to the array when it is added to the data on the Vue component that might be preventing this function from working correctly.

Answer 1

I see _.sortBy working, see fiddle here.

Here is the code:

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        students: [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}]
      };
    },
    methods: {
      sorted: function() {
        return _.sortBy(this.students, 'name');
      }
    }
})

Add more code from your repo, if you see still this is not resolved.