v-iconとv-forを使って外部リンクを設置する方法

Question

vuetifyを触ってみているのですが、不明点があり質問いたしました。
<v-for>と<v-icon>を使ってsocial iconをheaderに並べると言うことをやっているのですが、その際、v-iconに格納しているデータを下記のように書く時、実際に、自分のツイッターやfacebookなどのアカウントに飛ばすにはどのようにソースコードを記載すればいいのか教えていただきたいです。参考になるサイトが見当たらず困っております、、
data: () => ({
items: [
{
name: 'Twitter',
icon: 'mdi-twitter',
},
{
name: 'Youtube',
icon: 'mdi-youtube',
},
{
name: 'Facebook',
icon: 'mdi-facebook',
},
{
name: 'Email',
icon: 'mdi-email',
},
{
name: 'Phone',
icon: 'mdi-phone',
},
],
}),
}

Answer 1

v-iconは知らないのですが、
itemsの各要素に飛ばしたいlinkを追加して、
html側でリンクの設定をすればいいのではないでしょうか？

あと実際のコードは、コードブロック使って見やすくしたほうが良いと思います。

Comments

[zyunnsalome]

ご回答ありがとうございます。
下記のように予めやってみたのですが、リンクに飛ばないと言う状況です。
{
name: 'Twitter',
icon: 'mdi-twitter',
link: 'https://twitter.com/,
},

[aruto]

v-iconタグをタグで囲う。
そのタグに遷移を記載する。
でいけそうな感じがします。

以下のページ遷移のとこを参照で
https://qiita.com/rubytomato@github/items/890d59804978aa959e9c#%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB

[zyunnsalome]

ありがとうございます。何度もすいません。個別にv-iconにハイパーリンクを設定すると言うのはできたことがあるのですが、ループ処理の中で個別にtwitter、facebook、instagram などにそれぞれリンクを設定しておきたいのですが、それがうまくいかない状態です。。

[aruto]

個別ではリンクの設定ができたが、ループでどう回せばいいかがわからないということですね。

適当に参考になりそうなコードです。
ちゃんとは見てないんですけど、26行目ぐらいからの参考にすれば同じ考えで行けると思います。
v-iconを囲むタグをv-forで回しているってところです。
https://embed.plnkr.co/hD29gw26uefJMvzH1cvS/

[zyunnsalome]

あ、いけました。ありがとうございます。
:href="item.href"ですね。