【Vue.js】v-forの中で外部リンクと内部リンクを混ぜて表示する方法

本記事の内容

v-forを使って要素を繰り返して表示するのはわかったけど、その中身に外部リンクと内部リンクが混ざっている時の実装で少し悩んだので、同じような悩みを抱えている人の助けになる記事です。

前提

・Vue.jsとNuxt.jsを使ったアプリケーションでの実装
・Vuetifyを利用

です。

実装

大元のvueファイルの内容（一部抜粋）

（色々省略）

<v-btn
 v-for="link in links"
 :key="link"
 color="white"
 flat
 round
 :to="link.url"
>
 {{ link.name }}
</v-btn>

（色々省略）

<script>
  export default {
    data: () => ({
      links: [
        { url: 'hoge', name: '外部リンクへ' },
        { url: 'privacy-policy', name: 'プライバシーポリシー'},
        { url: 'service-policy', name: '利用規約'},
        { url: 'contact', name: 'お問い合わせ'},
        { url: 'for_user', name: '出品したい方'},
      ]
    })
  }
</script>

上記の内容では。:to="それぞれのurl"が入ってくる形になっていて、下の4つについてはそれで問題なかったのですが、hogeの部分を https://google.com のような外部リンクに飛ばしたかったので、ここの部分がちゃんと動作するように変更することにしました。

手順としては下記になります。

・もともとあった:to="link.url"を削除
・クリックした時にurlを判定して、特定のものについては外部リンクに遷移するように変更

この手順で実装したものが下記になります。

変更後のvueファイルの内容（一部抜粋）

（色々省略）
<v-btn
 v-for="link in links"
 :key="link"
 color="white"
 flat
 round
 @click="getCreateUrl(link.url)"
>
（色々省略）
<script>
  export default {
    data: () => ({
      links: [
        { url: 'hoge', name: '外部リンクへ' },
        { url: 'privacy-policy', name: 'プライバシーポリシー'},
        { url: 'service-policy', name: '利用規約'},
        { url: 'contact', name: 'お問い合わせ'},
        { url: 'for_user', name: '出品したい方'},
      ]
    }),
    methods: {
      getCreateUrl(url) {
        if(url==='hoge') {
          location.href="https://google.com/"
        } else {
          location.href=`${url}`
        }
      }
    }
  }
</script>

これで、無事に動いてくれました。

※他にいいやり方があったらご指摘ください。