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 圖標包裝在一個 span 中並使用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
• 像 RequireJS 這樣的 UMD 風格的加載器庫
• 使用 CommonJS 直接在服務器上（請參閱我們的服務器端渲染文檔

Answer 2

“i”標簽在火災轉向 svg 后注釋掉，使用一些 wrap <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替換（模板標簽不會被渲染）。

Answer 4

您使用的 Font Awesome 庫不了解 Vue。 它將您編寫的<i>轉換為<svg> ，此時它已從 Vue 中竊取。 Vue 不再控制它。 Dialog 給出的答案很好：用<span>包裹它。 但是后來你指出了另一種情況它不起作用。

要解決使用<span>包裝仍然不起作用的情況，請使用key="fa-sort-up" 。 這將強制 Vue 重新渲染包裝器，此時 Font Awesome 將更新圖標。 這是您示例的更新后的 jsFiddle ：

<span key="fa-sort-up" v-if="sort && descending"><i class="fas fa-sort-up"></i></span>
<span key="fa-sort-down" v-else-if="sort"><i class="fas fa-sort-down"></i></span>
<span key="fa-sort" v-else><i class="fas fa-sort"></i></span>

您可以使用任何您想要的密鑰，只要它是唯一的。

Answer 5

使用 FontAwesome 在 vue 中切換復選框

<style>
  .fa-check-square::before {
    color: green; 
  }
</style>

<script>
  Vue.component('some',
    {
      data: 
        function() {
          return{
            isclick: false
          }
        },
      methods: {
        isClicked: function() {
          this.isclick = !this.isclick;
        }
      },
      template: '<div id="test" v-on:click="isClicked">' +
        '<i v-if="isclick" class="fa fa-check-square" style="font-size: 40px;"></i>' +
        '<i v-if="!isclick" class="far fa-square" style="font-size: 40px;"></i>' +
        '</div>'
    });

</script>

<div id="componentsDemo">
  <some></some>
  <some></some>
  <some></some>
  <some></some>
</div>

<script>
  new Vue({ el: '#componentsDemo' });
</script>

Answer 6

我通過為每個圖標創建一個模板來解決這個問題，然后根據布爾值有條件地加載任一模板。

這是我的主要模板：

 <div v-if="minimised"> <maximise-icon> </maximise-icon> </div> <div v-if="!minimised"> <minimise-icon> </minimise-icon> </div>

然后像這樣創建圖標：

 FontAwesomeConfig = { autoReplaceSvg: 'nest' }//important addition! Vue.component('minimise-icon', { template: ` <i class="fas fa-minus "></i> ` }) Vue.component('maximise-icon', { template: ` <i class="fas fa-plus "></i> ` })

如果有更優雅的方式，我會全神貫注！