Vueでv-forを使いfont awosomeを繰り返し表示させる方法

2720 ワード
Vue.js FontAwesome Vue.js テキストリンク

タイトル通りvueでfont awosomeのアイコンを繰り返し表示させようとしたら、一部困ったことになったので解決策を記しておきます。
vueでfont awosomeの導入するまではこの記事を参考にしました。

目的

よくプロフィールサイトで見かけるこんな感じのレイアウトを構築したいとします。

結論

以下のように記述して表示させることができました。

<v-layout justify-space-around wrap class="mb-10">
  <v-flex
    v-for="language in languages"
    :key="language.id"
  >
  <font-awesome-icon
  :icon="{ prefix: language.prefix, iconName: language.iconName }"
  /><br />
  <span>{{ language.name }}</span>
  </v-flex>
</v-layout>

<script>
export default {
  data() {
    return {
      languages: [
        {
          id: 1,
          prefix: "fas",
          iconName: "code",
          name: "HTML5/CSS3/Sass",
        },
        {
          id: 2,
          prefix: "fab",
          iconName: "js-square",
          name: "JavaScript",
        },
        {
          id: 3,
          prefix: "far",
          iconName: "gem",
          name: "Ruby",
        },
      ],
    };
  },
};
</script>

注意点

何が問題だったかというと、vueでfont awosomeを表示させようとすると、prefixがデフォルトの状態でfarになっており、それ以外のfasやfabは指定しないと表示されないのです。(こちらの記事を参考にさせていただきました。)

したがって下のように記述してしまうと、デフォルトのfar以外は表示されなくなってしますのです。

<v-layout justify-space-around wrap class="mb-10">
  <v-flex
    v-for="language in languages"
    :key="language.id"
  >
  <font-awesome-icon
  :iconName="language.iconName" //prefixの指定をしていない
  /><br />
  <span>{{ language.name }}</span>
  </v-flex>
</v-layout>

<script>
//省略
         {
          id: 2,
          iconName: "js-square", //farではないので表示されない
          name: "JavaScript",
        },
        {
          id: 3,
          iconName: "gem", //farなので表示される
          name: "Ruby",
       },
      ],
    };
  },
};
</script>