環境
Vue.js 6.14.9
Vue CLI 4.5.9
Font awesomeを利用
Font awesome を Vue.js で使ってみよう
VueでFont awesomeを利用する方法はこちらを参照させていただきました。
アイコンを並べる
まず参照通り表示してみました。
About.vue
<template>
<div class="about">
<font-awesome-icon icon="coffee" />
</div>
</template>
ここから、次にv-forを使って、アイコンを複数並べたいと思います。
About.vue
<template>
<div class="about">
<div class="item" v-for="(data, index) in hoge" :key="index">
<font-awesome-icon :icon="{{data.icon}}" />
</div>
</div>
</template>
scriptも記述していきます。
About.vue
<script>
export default {
data(){
return {
hoge: [
{icon: "coffee"},
{icon: "users"}
]};
}
};
</script>
あれ、エラーが、、、
上記のエラーをみると、
icon="{{data.icon}}"の代わりに、icon="data.icon"を使ってねと書いてあるので、修正します。
About.vue
<template>
<div class="about">
<div class="item" v-for="(data, index) in hoge" :key="index">
<font-awesome-icon :icon="data.icon"/ >
</div>
</div>
</template>
これでエラーは解消できました。
↓こんなふうにアイコンを並べることができました！！
