我正在尝试使用 font-awesome 和 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
正在正确更新,跨度元素也会相应更新。但是,那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 元素都会从头开始渲染。
您还可以使用类绑定更新您的类:
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)