Vueで自分のアカウント一覧を表示させるには #Vue.js

つくりたかったもの

ポートフォリオ等で使う、githubやqiitaのアイコンを並べて自分のサイトに遷移させるもの
こんなイメージ

環境

vue-cli 3.0
vuetify

どう作ったか

一部省略はしているが、v-btnにてv-forして要素を入れていった

Sample.vue

<template>
　<!-- 一部省略 -->
  <v-btn v-for="website in websites" :key="website" class="mx-4" fab icon>
    <a v-bind:href="website.link">
      <v-avatar size="45">
        <img v-bind:src="website.icon" alt="avatar" />
      </v-avatar>
    </a>
  </v-btn>
</template>

<script>
export default {
  data: () => ({
    websites: [
      {
        text: "Twitter",
        link: "https://twitter.com/your_account",
        icon: require("@/assets/twitter-logo.png")
      },
      {
        text: "Facebook",
        link: "https://www.facebook.com/people/your_account",
        icon: require("@/assets/facebook-logo.png")
      },
      {
        text: "Github",
        link: "https://github.com/your_account",
        icon: require("@/assets/github-logo.jpg")
      }
  ]
};
</script>

個人的にハマったところ

scriptのdataにてrequireを指定しないとうまく表示されなかった
- 個人的にはtemplate部分でsrc=require("website.icon")としたかった
リンク部分
- v-bind:hrefをimgやavatar上に置くとうまくいかなかったためa tagで我慢した

ひとこと

Vuetifyってほんと便利だなー

ロゴアイコンのリンク集

ポートフォリオでよく使うアカウント系のロゴのリンクをはっておきます