Задание значение html атрибутов по условию в vue

Question

Есть ли возможность в vue задавать значение атрибутов в зависимости от условия, так как это сделано с классами. Сейчас всё работает через v-if, но это выглядит слишком громоздко, и есть ощущение, что можно это сделать более краток.

<font-awesome-icon v-if="sortData.field != 'id'" icon="fa-solid fa-sort" size="sm"
      color="#6c757d" class="me-1" />
<font-awesome-icon v-if="sortData.field == 'id' && sortData.type == 'asc'"
      icon="fa-solid fa-sort-up" size="sm" color="#6c757d" class="me-1" />
<font-awesome-icon v-if="sortData.field == 'id' && sortData.type == 'desc'"
      icon="fa-solid fa-sort-down" size="sm" color="#6c757d" class="me-1" /> 
№

Какая-нибудь конструкция по типу v-bind:class думаю была бы тут лучше.

Answer 1

Разобрался как это можно сделать через v-bind

<th @click="sort('id')">
    <font-awesome-icon v-bind:icon="'fa-solid' + (sortData.field != 'id' ? ' fa-sort' : (sortData.type == 'asc' ? ' fa-sort-up' : ' fa-sort-down'))"
         size="sm" color="#6c757d" class="me-1" />
    №
</th>

БЛОГ НА HUSL

Задание значение html атрибутов по условию в vue

Ответы (1 шт):