vue.js - Font Awesome无法使用vue正确更新

我正在尝试使用超棒的字体和 bool(boolean) 玛制作一个可点击的“星形”图标，在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来实现此目的，但是我不明白为什么这不起作用。

最佳答案

Vue尝试尽可能高效地渲染元素，经常重新使用它们，而不是从头开始渲染。不过，这并不总是可取的，因此Vue为您提供了一种方式，“这两个元素是完全分开的-请勿重复使用。”添加具有唯一值的键属性:

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

现在，每次切换时，这些i元素都会从头开始渲染。

您还可以使用类绑定(bind)更新类:

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