I am currently working on a table component in a .vue file where I want to display icons based on the direction of the order clicked.
For example:
<th v-for="(column, index) in columns" :key="index" @click="sort( index )">
<span>{{ column.label }}
<i v-if="column.dir == 'desc'" class="fa fa-sort-down"></i>
<i v-else class="fa fa-sort-up"></i>
</span>
The above snippet represents the header layout, and here is an example of my default column object:
data().....
columns: [
{
label: '#',
order: false,
search: false,
column: 'id',
dir: 'desc'
},
{
label: 'Username',
order: true,
search: true,
column: 'username',
dir: 'desc'
}]
When sorting, I update the clicked column using the sort method.
var col = this.columns[column];
col.dir = ( col.dir == 'desc' ) ? 'asc' : 'desc';
this.$set(this.columns, index, col);
Vue.set(this.columns, index, col);
Also
this.$nextTick(function() {
columns[index].dir = ( columns[index].dir == 'desc' ) ? 'asc' : 'desc';
});
Although I can see the updated value in the Vue dev tool, the reactivity does not reflect back in the main columns object, and the view fails to update accordingly.
I might be missing some key concept here, so any guidance or assistance would be highly appreciated. Thank you
UPDATE.....
Many thanks for the assistance provided. It turns out that font-awesome was altering the tags in the DOM and replacing them with an SVG, which caused Vue.js to have trouble recognizing them.
Despite this issue, I will still select a helpful answer from below.