[Vuejs]-How to show sort icon based on computed property?

by

3👍

Your computed properties have no actual dependencies. At the simplest level, the dependencies of a computed property are any direct accesses to a value in the data property, or to another computed property.

A computed property will only re-evaluate when some of its reactive dependencies have changed.

Both of your computed properties call a method without accessing either type of value, therefore a change will never be identified.

If you want it to react to changes, check this.filterOptions.sortyBy and this.filterOptions.sort_type in the computed property.

There’s still an easier way to handle this though. Why not just use a single computed property to get the icon, and use that as the class description?

computed: {
    refCodeClass() {
        if (this.filterOptions.sort_by === 'refcode') {
            return this.filterOptions.sort_type === 'ASC' 
                ? 'fa-sort-up' 
                : 'fa-sort-down';
        }
        return 'fas-sort''
    }
}

<i class="fas" :class="refCodeClass"></i>
👤Trenton Trama

Leave a comment