スポンサーリンク

コードが書ける!数式が書ける!AAが書ける!スタンプが貼れる!

無料の匿名掲示板型SNS「このはちゃんねる

新規会員募集中!

Vue + Fontawesome - v-if でアイコンの切り替えが出来ない

15, 2019-06-27

目次

環境

npmで以下を入れている。

    "@fortawesome/fontawesome-free": "^5.8.2",
    "vue": "^2.6.10",

はじめに

Vueのv-ifでFontawesomeのアイコンを切り替えようとした。

<i v-if="flag" class="fa fa-icon"></i>
<i v-else class="fa fa-icon"></i>

しかし、一つ目のアイコンは表示されるが二つ目はフラグを切り替えても表示されない。

原因

インストールしている@fortawesome/fontawesome-freeは自前のjsでアイコンの置き換えをしている。
これがVueと相性が悪いのではないかという推測が立つ。

// アイコンを頑張って置き換えている皆さん
import '@fortawesome/fontawesome-free/js/fontawesome.js';
import '@fortawesome/fontawesome-free/js/solid.js';
import '@fortawesome/fontawesome-free/js/regular.js';

解決

jQueryによる表示の切り替えだとうまくいった。

if (flag) {
  $('.icon-1').show();
  $('.icon-2').hide();
} else {
  $('.icon-1').hide();
  $('.icon-2').show();
}

解決2

vue-fontawesomeを使う。vue-fontawesomeのコンポーネントはv-ifでも切り替えができた。
ただ、インターフェースが少し特殊なので人を選ぶかもしれない。

<font-awesome-icon v-if="flag" icon="icon-1" />
<font-awesome-icon v-else icon="icon-2" />

<!-- 少し特殊なインターフェース -->
<font-awesome-icon icon="['far', 'regular-icon-1']" />

おわりに

jQueryによる解決はVueの流儀的には強引な気がするので、vue-fontawesomeの導入の検討がいいのかもしれない。

投稿者名です。64字以内で入力してください。

必要な場合はEメールアドレスを入力してください(全体に公開されます)。

投稿する内容です。

スポンサーリンク

スポンサーリンク

スポンサーリンク

スポンサーリンク