How to change the icon when sorting each column?

Question

Vue.js

There is a codepen
Sorting is implemented. But you need to change the icon when sorting. How to do this for the current column?

Answer 1

Replace

<div class="img">
  <img
    v-if="
      currentSort === tableHeader.name && currentSortDir === 'desc'
    "
    src="https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13"
    alt=""
  />
  <img v-else src="https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13" alt="" />
</div>

on the

<div class="img" v-if="currentSort === tableHeader.influencerSync">
  <img
    :src="currentSortDir === 'desc'
      ? 'https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13'
      : 'https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13'
    "
  />
</div>