How to Filter and Order table rows in Vue 2.x

@rfountain Here's what I've been doing...

data: function() {
    return {
        customers: {},
        sortKey: ['customer_name'],
        sortOrder: ['asc'],
    }
},

computed: {
    customersSorted: function() {
        return _.orderBy(this.customers, this.sortKey, this.sortOrder);
    },
},

methods: {
    fetchCustomers: function() {
        axios.get('/api/customers').then((response) => {
            this.customers = response.data;
        }).catch(function(error) {
            console.log(error);
        });
    },
    sortBy: function(key) {
        if (key == this.sortKey) {
            this.sortOrder = (this.sortOrder == 'asc') ? 'desc' : 'asc';
        } else {
            this.sortKey = key;
            this.sortOrder = 'asc';
        }
   },
}

In my view, I iterate through customersSorted to display the data.

And I use triggers like this in my html in the heading of a table column...

<span class="fa fa-sort" @click="sortBy('customer_name')">

Maybe this helps.

@goatshark thanks for the code. That works great for sorting. Have you done any filtering with Vue as well?

Hey @rfountain I have not yet. That should change in the next 48 hours though as I'm rebuilding part of a front-end and am definitely going to have to use filters.

@goatshark . Thank you. I'll mark this question as answered but please let me know what your solution is to filtering. I'll be working on something as well