Font Awesome не обновляется должным образом с помощью vue

Question

Я пытаюсь сделать кликабельный значок «звездочка», используя шрифт-awesome с bulma, переключаясь между обычным и сплошным стилями (fas и far) в Vue, для достижения этого у меня есть следующий компонент:

<template>
    <span v-if="isStarred" class="icon starred config-icon clickable-text" @click="unstar">
        <i class="far fa-star" title="Unstar Ranking"/>
    </span>
    <span v-else class="icon unstarred config-icon clickable-text" @click="star">
        <i class="fas fa-star" title="Star Ranking"/>
    </span>
</template>

Значение isStarred обновляется должным образом, и элементы span обновляются соответствующим образом. Однако элемент i со значком не обновляется, пока я полностью не перезагружу страницу.

Мне удалось сделать это с v-show вместо v-if, но я не понимаю, почему это не сработает.

Answer 1

Я переключил [fontawesome / js / all.js] на [fontawesome / css / all.css], и это решило проблему. Я полагаю, что fontawesome js отображается после vue.

Answer 2

Vue пытается визуализировать элементы настолько эффективно, насколько это возможно, часто повторно используя их вместо рендеринга с нуля. Однако это не всегда желательно, поэтому Vue предлагает вам способ сказать: «Эти два элемента совершенно разные - не используйте их повторно». Добавьте ключевой атрибут с уникальными значениями:

<i class="far fa-star" title="Unstar Ranking" key="unstared"/>
...
<i class="fas fa-star" title="Star Ranking" key="stared"/>

Теперь эти элементы i будут отображаться с нуля при каждом переключении.

Вы также можете обновить классы с помощью привязки классов:

<span v-if="isStarred" v-bind:class="{starred: isStarred, unstarred: !isStarred}" class="icon config-icon clickable-text" @click="toggleStar">
    <i v-bind:class="{far: isStarred, fas: !isStarred}" class="fa-star" v-bind:title="title"/>
</span>