Font Awesome not updating properly with vue

Question

I'm trying to make a clickable "star" icon using font-awesome with bulma, switching between regular and solid styles (fas and far) in Vue, to achieve this I have the following component:

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

The value isStarred is being updated properly and the span elements are updating accordingly. However the i element with the icon doesn't update until I fully reload the page.

I was able to make this work with v-show instead of v-if but I don't understand why this wouldn't work.

Jakub Kutrzeba · Accepted Answer · 2018-11-17 20:34:22Z

13

Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. This isn’t always desirable though, so Vue offers a way for you to say, “These two elements are completely separate - don’t re-use them.” Add a key attribute with unique values:

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

Now those i elements will be rendered from scratch each time you toggle.

You can also update your classes with class binding:

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

edited Nov 17, 2018 at 20:34

answered May 8, 2018 at 22:50

Jakub Kutrzeba

1,0039 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

angrykoala Over a year ago

Thanks, the key is working fine. However class binding didn't work (is the first thing I actually tried before using separate components)

brainbag Over a year ago

The example given using key on the font awesome icons didn't work for me, however adding a key to the encloding button the icon was a part of did. That was a stumper, thanks Jakub.

AMT Over a year ago

Had the same problem with ionicons and this fixed it perfectly. Thanks!

Ciabaros Over a year ago

For me this didn't work. But setting the key on the PARENT element worked fine.

zhangv · Accepted Answer · 2019-03-15 02:07:04Z

11

I switched the [fontawesome/js/all.js] to [fontawesome/css/all.css], and it solved the problem. I guess the fontawesome js is rendered after the vue.

answered Mar 15, 2019 at 2:07

zhangv

9911 gold badge9 silver badges26 bronze badges

1 Comment

Mathias Osterhagen Over a year ago

I was importing both. Just commenting import '@fortawesome/fontawesome-free/js/all.js' solved it to me too.

Collectives™ on Stack Overflow

Font Awesome not updating properly with vue

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related