Vuetifyのfooterサンプルにurlをつける

概要

Vuetifyのfooterサンプルの会社のフッターのボタンには文字だけでurlのリンクがなかったので付けてみました。 dataのlinksを配列からオブジェクトにして、ボタンに表示する名前をキーに、urlをバリューにしています。 v-forディレクティブでオブジェクトからバリューとキーを取得することで、ボタン表示名とurlリンクを行えるようにしました。

---

テンプレートのfooter部分は以下の通りです。

<v-footer
  color="primary lighten-1"
  padless
>
  <v-row
    justify="center"
    no-gutters
  >
    <v-btn
      v-for="(url, name) in links"
      :key="name"
      :href='url'
      color="white"
      text
      rounded
      class="my-2"
    >
      {{ name }}
    </v-btn>
    <v-col
      class="text-center"
      cols="12"
    >
    {{ new Date().getFullYear() }} — <strong>miyazadaniels.com</strong>
    </v-col>
  </v-row>
</v-footer>

data部分は以下の通りです。

  data: () => ({
      links: {
        'Home' : './home',
        'About Us' : './aboutus',
        'Team' : './team',
        'Services' : './services',
        'Blog' : './blog',
        'Contact Us' : './contactus'
      }
    }),