[vue]用v-if切換font-awesome icon

  • 443
  • 0

(參考網址:https://stackoverflow.com/questions/49343425/vue-js-cant-toggle-a-font-awesome-icon)

需在<i></i>外層再包覆一層div

...

 

說明:

今天試了很久,發現無法正常切換i tag的顯示,

一般文字可以,但是font-awesome icon卻不行,

上網找答案後才得之需要在<i></i>外再包覆一層div,

ex:

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

先紀錄下來以免日後再次崩潰