Nuxt + Vue 3: Make all table columns sortable and isolate sort click action to just change icons on sorted column

Assuming only 1 column can be ascending at a time, just add the currentSort to the conditionals.


<IconBase
  v-if="currentSortDir === 'asc' && currentSort === 'email'"
  class="fill-current w-4 h-4 mr-2"
  icon-color="rgba(0,0,0,0.80)"
  icon-name="checkmark"
  >
  <IconAsc/>
</IconBase>
<IconBase
  v-else
  class="fill-current w-4 h-4 mr-2"
  icon-color="rgba(0,0,0,0.80)"
  icon-name="checkmark"
  >
  <IconDesc/>
</IconBase>

Note the v-else in the desc icon.

Regarding the double-click issue, try this:

if (columnToSort === this.currentSort) {
  this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc'
} else {
  this.currentSortDir = 'asc'
}
this.currentSort = columnToSort

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top