Vue.js无法切换Font Awesome图标问题求助

我帮你排查了下这个问题，核心原因在于Font Awesome 5的JS版本会把页面中的<i>标签动态替换成<svg>元素——这就导致Vue的响应式绑定没法直接追踪到元素的变化：当你用布尔值切换图标class时，原来的<i>已经被FA替换成svg了，新的class不会被FA重新解析；要是用v-show控制显示隐藏，svg的display属性也可能没被正确同步。

给你两个靠谱的解决方案，按需选择：

方案一：用v-if/v-else直接控制元素的创建销毁（推荐） #

这种方式最符合Vue的响应式逻辑，v-if会完全创建或销毁图标元素，每次创建新的<i>时，FA的JS都会自动重新解析它并生成正确的svg图标。示例代码如下：

<div id="app">
  <!-- 绑定布尔值的输入框 -->
  <input type="checkbox" v-model="isMarked">
  <!-- 用v-if/v-else切换不同图标 -->
  <i v-if="isMarked" class="fas fa-check"></i>
  <i v-else class="fas fa-times"></i>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isMarked: false // 控制图标的布尔值
  }
})
</script>

方案二：切换class后手动触发FA重新渲染 #

如果你一定要通过切换class来实现图标变化，那每次class更新后，需要手动调用FA的API重新解析DOM，让新的图标生效。可以用Vue的watch监听布尔值的变化，然后触发渲染：

<div id="app">
  <input type="checkbox" v-model="isMarked">
  <!-- 通过动态class切换图标 -->
  <i :class="isMarked ? 'fas fa-check' : 'fas fa-times'"></i>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isMarked: false
  },
  watch: {
    isMarked() {
      // 延迟调用确保DOM已经更新，再让FA重新解析图标
      setTimeout(() => {
        fa.dom.i2svg();
      }, 0);
    }
  }
})
</script>

另外提醒下，你已经给FA的JS加了defer属性，这点做得很好——它能保证FA在DOM加载完成后再初始化，避免初始渲染时的图标异常问题。

内容的提问来源于stack exchange，提问作者TheOne