More than 1 year has passed since last update.

[Vuetify]Veutifyでv-imgタグをクリックしたときに内部リンクに遷移させる

Posted at 2022-07-07

はじめに

Veutifyのv-imgコンポーネントをクリックしたときに内部リンクに遷移させたい場面があったので、実装方法をご紹介します。

公式ドキュメントを参考に進めていきます。

v-imgコンポーネントは、propsでtoを指定することができないため、

        <v-img
          to="/"
          :src="require('@/assets/logo.png')"
        >
        </v-img>

のように記述しても、遷移しません。

また、v-imgコンポーネントはclickイベントを設定できないため、メソッド内で遷移させることもできません。

        <v-img
          @click="goHome"
          :src="require('@/assets/logo.png')"
        >
        </v-img>

今回は、router-linkで囲うことで遷移させることができました。

       <router-link to="/">
        <v-img
          :src="require('@/assets/logo.png')"
        >
        </v-img>
      </router-link>

以上で実装完了です。

公式ドキュメントを参考に、できないことを確認することも大事だなと思いました。