Question

我试图制作一个可点击的＆＃34;明星＆＃34;使用font-awesome with bulma的图标，在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来完成这项工作，但我不明白为什么这样做不会有效。

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

Answer 2

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

字体真棒没有用vue正确更新

2 个答案: