Font Awesome 无法使用 vue 正确更新

本文介绍了Font Awesome 无法使用 vue 正确更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在尝试使用带有 bulma 的 font-awesome 制作一个可点击的星形"图标，在 Vue 中在常规和实体样式(fas 和 far)之间切换，为了实现这一点，我有以下组件:

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>

值 isStarred 正在正确更新，span 元素也在相应更新.但是，在我完全重新加载页面之前，带有图标的 i 元素不会更新.

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.

我能够使用 v-show 而不是 v-if 来完成这项工作，但我不明白为什么这不起作用.

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

推荐答案

Vue 尝试尽可能高效地渲染元素，经常重用它们而不是从头开始渲染.但这并不总是可取的，所以 Vue 提供了一种方式让你说，这两个元素是完全独立的——不要重复使用它们."添加具有唯一值的键属性:

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

现在，每次切换时，这些 i 元素都会从头开始呈现.

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>

这篇关于Font Awesome 无法使用 vue 正确更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！