Как менять иконку при сортировке каждого столбца?

Question

[dmitry2000]

Есть кодпен
Реализована сортировка. Но нужно менять иконку при сортировке. Как это сделать у текущего столбца?

Answer 1

[0xD34F]

Заменить

<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>

на

<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>

Comments

[dmitry2000]

Спасибо, ну я и тупанул конечно с name, автоматически как-то его подставил

[Andrew]

В templete подобную проверку лучше не держать. Стоит вынести в computed. Тем самым шаблон станет более читабельным.

Плюс если эти данные будут не захардкожены, а будут приходить с бэкенда, и если что-то не придет, то будет ошибка. Поэтому стоит сделать проверку получше.

А так, как вариант =)

dmitry2000 0xD34F

[0xD34F]

Andrew, ну охренеть, вы мне прям глаза открыли.

[Andrew]

Просто для dmitry2000 совет дал.

А вас 0xD34F упомянул =)