Font Awesome 无法使用 vue 正确更新

Posted 2023-02-23

【中文标题】Font Awesome 无法使用 vue 正确更新

【英文标题】：Font Awesome not updating properly with vue

【发布时间】：2018-10-18 22:54:24

【问题描述】：

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

<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 来完成这项工作，但我不明白为什么这不起作用。

【参考方案1】：

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>

【讨论】：

谢谢，钥匙工作正常。但是类绑定不起作用（这是我在使用单独的组件之前实际尝试过的第一件事）

在字体真棒图标上使用key 给出的示例对我不起作用，但是将key 添加到封闭的button 图标是其中的一部分。真是个笨蛋，谢谢 Jakub。

对 ionicons 有同样的问题，这完美地解决了它。谢谢！

【参考方案2】：

我将 [fontawesome/js/all.js] 切换为 [fontawesome/css/all.css]，它解决了问题。我猜fontawesome js是在vue之后渲染的。

【讨论】：

我都在导入。只是评论import '@fortawesome/fontawesome-free/js/all.js' 也解决了我的问题。