Vue에서 v-for를 사용하여 font awosome을 반복적으로 표시하는 방법

제목대로 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>