Vue.js无法切换字体真棒图标

Question

我试图根据布尔值切换字体真棒图标,但似乎字体真棒图标在绘制后仍保留在屏幕上:

https://jsfiddle.net/50wL7mdz/200312/

HTML:

<script src="https://unpkg.com/vue"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
?


<div id="app">
  <input v-model="marked" type="checkbox"/>
  <i v-if="marked" class="far fa-check-square"></i>
</div>

JS:

new Vue({
  el: '#app',
  data: {
    marked: false
  }
})

我做错了什么或者在font-awesome或vue.js中有错误吗？

Answer 1

我最近在使用 Vue.js 2.5.x 和 FontAwesome 5.5.x 时遇到了这个问题——图标类没有按预期更新。

从 FontAwesome Web Fonts + CSS 实现切换到 SVG + JS 后，以下代码不再起作用：

<i :class="[sortByFirstNameAsc ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>

将会发生的情况是 FontAwesome JavaScript 将触发并包装<i>标签并用 SVG 元素替换它，如下面的简化示例所示：

<span data-v-2614dbd6="">
  <svg data-v-2614dbd6="" class="svg-inline--fa fa-caret-up" ...">
    ...
  </svg>

  <!-- <i data-v-2614dbd6="" class="fa fa-caret-up"></i> -->
</span>

不幸的是，活动类是在内部隐藏<i>标签上切换，而不是在外部可见 SVG 元素上切换。

恢复动态活动类切换的解决方法是将 FontAwesome 图标包装在一个范围内并使用v-show指令，如以下代码片段所示：

<span v-show="sortByFirstNameAsc"><i class="fa fa-caret-up"></i></span>
<span v-show="sortByFirstNameDesc"><i class="fa fa-caret-down"></i></span>

FontAwesome 文档现在推荐使用他们的 Vue 组件来避免 DOM 中的冲突：

兼容性提升！ 如果您使用 Vue，则需要vue-fontawesome包或带有 CSS 的 Web 字体。

SVG 核心包在以下情况下很有帮助和推荐：

• 将大量图标子集到您正在使用的图标中
• 作为与 React、Angular、Vue 或 Ember 等工具进行更大集成的基础库（实际上我们自己的组件使用这些包）
• 作为 CommonJS/ES6 模块捆绑工具，如 Webpack、Rollup 或 Parcel
• 作为 UMD 风格的加载程序库，如 RequireJS
• 使用 CommonJS 直接在服务器上（请参阅我们的服务器端渲染文档

Answer 2

火灾转向svg后,"我"标记注释,使用一些包装 <span v-if="marked"><i class="far fa-check-square"></i></span>

Answer 3

这个答案适用于将 Font Awesome 与 SVG 一起使用。

由于某种原因，您需要将i标签包裹两次。例如，代替这个：

<div v-if="condition">
  <i class="fal fa-caret-left"></i>
</div>
<div v-else>
  <i class="fas fa-caret-left"></i>
</div>

做这个：

<template v-if="condition">
  <div>
    <i class="fal fa-caret-left"></i>
  </div>
</template>
<template v-else>
  <div>
    <i class="fas fa-caret-left"></i>
  </div>
</template>

不完全确定为什么你需要将其包装两次，因为我认为你i通过包装一次就可以充分解耦标签，但它对我来说是这样的，所以显然还有其他事情发生。

另外，请记住，由于明显的原因，内部div不能被替换template（模板标签不会被渲染）。