Vue에서 내 계정 목록을 보려면

만들고 싶은 것

포트폴리오 등에서 사용하는 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>