Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

本記事の内容

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>

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

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

masanarih0ri
商社の営業→新規事業開発とかweb制作のディレクションとかを経てエンジニアに。某ネット印刷の会社で主にフロントエンドの開発をしています。 CSS/Sass/Javascript/Vue.js/Nuxt.js/Typescript/Rails/Pythonなんかを触ったりしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away