nuxt.jsのv-forでタグを出さずにループを回したい。

Question

nuxt.jsで以下のコードを実現したいのですが、<template>タグが予約語らしくエラーを吐かれてしまいます。

<p>最寄駅：
   <template v-for="data, index in ['新橋','有楽町','東京']" :key="index">
      <a :href="`/?area=${data}`">{{data}}</a>
      | 
   </template>
</p>

そこで、ただ今<template>タグではなく、<span>タグにて代用しているのですが、インライン要素が被っているせいで警告が出てしまいます。

こちらを簡潔に実現する方法をご教示頂けると幸いです。

完成形イメージ

<p>【最寄駅】: 
<nuxt-link to="/shops/?nearby=新橋">新橋</nuxt-link>
    |
<nuxt-link to="/shops/?nearby=東京">東京</nuxt-link>
    |
<nuxt-link to="/shops/?nearby=東京">東京</nuxt-link>
</p>

追記1
<template>タグを使用した際のエラーです。

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):                                       friendly-errors 15:52:17
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  <template> cannot be keyed. Place the key on real elements instead.

追記2
今現在使用しているコードは以下になります。
shop.nearbyを['新橋','有楽町','東京']に読み替えて頂けると幸いです。

<p>【最寄駅】: 
<span class="shop-nearby" v-for="nearby, index in shop.nearby" 
      :key="`shop-nearby-${shop.title}-${index}`">
    <nuxt-link :to="`/shops/?nearby=${nearby}`">{{nearby}}</nuxt-link>
    {{index != shop.nearby.length - 1 ? ' | ' : ''}}
</span>
</p>

追記3
今現在のコードでのvueクライアント側での警告は以下になります。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Comments

[rubytomato]

> <template>タグが予約語らしくエラーを吐かれてしまいます

エラーメッセージを質問内容に追記ください。

[basicemkk]

申し訳ございません。
追記させて頂きました。

Answer 1

すでに解決されているようですが、質問を修正して頂きましたので、補足という形で回答させて頂きます。

<template>タグを使用した際のエラーです。

こちらのエラーですが、出力されたエラーメッセージの通りtemplateに対してkeyは付けられないので

<template> cannot be keyed. Place the key on real elements instead.

既に付いている回答の通り、aタグにkeyを付けることで解決できます。

<template v-for="(data, index) in ['新橋', '有楽町', '東京']">
    <a :href="`/?area=${data}`" :key="index">{{ data }}</a>
</template>

次の警告ですが、こちらは私の環境では再現しなかったので原因は不明です。
ただ、メッセージの内容から一時的にhtmlタグのマークアップが適切でなかった状態があったのではないかと思います。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

最後に、リンクをspanタグで囲う必要がないのであれば以下の書き方が可能です。

<p>
  【最寄駅】:
  <template v-for="(nearby, index) in shop.nearby">
    {{ index === 0 ? '' : ' | ' }}
    <nuxt-link
      :key="index"
      :to="{ path: '/shops/', query: { nearby: `${nearby}` } }"
      class="shop-nearby"
      >{{ nearby }}</nuxt-link
    >
  </template>
</p>

これは最終的に以下のタグで描画されます。

<p>
      【最寄駅】:
      
        
        <a href="/shops/?nearby=%E6%96%B0%E6%A9%8B" class="shop-nearby">新橋</a>
         | 
        <a href="/shops/?nearby=%E6%9C%89%E6%A5%BD%E7%94%BA" class="shop-nearby">有楽町</a>
         | 
        <a href="/shops/?nearby=%E6%9D%B1%E4%BA%AC" class="shop-nearby">東京</a></p>

以上参考になれば幸いです。

Comments

[basicemkk]

補足でご説明頂きまして大変ありがとうございます。
keyが付いていることに対してのエラーだったのですね。

まさしく私が求めていたコードになりますので、ベストアンサーにさせて頂きます。

今後ともよろしくお願い致します。

[basicemkk]

なお、クライアント側で出る警告文ですが、自己回答と重複してしまいますが、
{{index != shop.nearby.length - 1 ? ' | ' : ''}}を{{index != shop.nearby.length - 1 ? ' | ' : ' '}}と空白文字を入れることにより警告がなくなりました。

https://ginpen.com/2018/01/17/mismatching-childnodes-vs-vnodes/

こちらを参考にしたところ、どうやら空白文字が挿入されることを先読みしての警告のようです。

ただ、spanタグをもはや使わないので警告が出ることはなくなると思います。

この度は、ご回答頂きましてありがとうございました。

Answer 2

こちらで、いかがでしょうか？

<p>最寄駅：
  <nuxt-link :to="`/?area=${data}`" v-for="data in ['新橋','有楽町','東京']" :key="data">
   {{data}}
   </nuxt-link>
</p>

Comments

[basicemkk]

すみません、修正したのですが、
「|」という記号でそれぞれ空白を開けております。
抜けておりました。

[ff7575]

申し訳ありません
そこ以外は問題なかったでしょうか？

[basicemkk]

お返事ありがとうございます。

完成イメージとして、
<p>
<nuxt-link>新橋</nuxt-link> |
<nuxt-link>有楽町</nuxt-link> |
<nuxt-link>東京</nuxt-link> |
</p>t
のようにしたいと考えていまして、
「|」という文字もループで回したいという意味です。
わかりづらく申し訳ございません。

[ff7575]

いえいえ、こちらこそ見逃してしまい、申し訳ありません。
<p>最寄駅：
<nuxt-link :to="`/?area=${data}`" v-for="data in ['新橋','有楽町','東京']" :key="data">
{{data}} |
</nuxt-link>
</p>
これで、よろしいでしょうか、
<nuxt-link>を縦で表示したければ、cssなんかでclassを作り、display:block;で指定すればよいかと思います。下の感じです。
<p>最寄駅：
<nuxt-link :to="`/?area=${data}`" v-for="data in ['新橋','有楽町','東京']" :key="data" class="block">
{{data}} |
</nuxt-link>
</p>

[basicemkk]

ありがとうございます。
そうしますと、|がリンク化されてしまいまして、できればテキストにて表したいのです、、、
それこそ、after要素のcontentに|を指定するしかないんですかね、、
度々申し訳ございません。

[ff7575]

とんでもないです。そうしましたら、すいません。私も分かる範囲でしかお手伝いできないのですが、
cssにはpointer-events:none;で指定箇所のリンクを非リンクにするプロパティが存在していまして、それを利用して
<nuxt-link :to="`/?area=${data}`" v-for="data in ['新橋','有楽町','東京']" :key="data">
{{data}}<span class="event-none"> |</span>
</nuxt-link>
のように、.event-noneクラスを作りまして、その中にpointer-events:none;をつけていただくと実現できるかもしれません。

[basicemkk]

ありがとうございます！
なるほど、CSSでカバーですね。

できればHTML構造でインライン要素（リンクと|というテキスト）を並列できたらと考えていますので、もう少し検討してみます！
ご丁寧にありがとうございました。

[basicemkk]

すみません、自己解決しました。
ありがとうございました！

[ff7575]

解決でき、なによりです。こちらも勉強になりました。ありがとうございました。

Answer 3

以下を参考にして、

<p>【最寄駅】: 
<span class="shop-nearby" v-for="nearby, index in shop.nearby" 
      :key="`shop-nearby-${shop.title}-${index}`">
    <nuxt-link :to="`/shops/?nearby=${nearby}`">{{nearby}}</nuxt-link>
    {{index != shop.nearby.length - 1 ? ' | ' : ''}}
</span>
</p>

の部分の{{index != shop.nearby.length - 1 ? ' | ' : ''}}を{{index != shop.nearby.length - 1 ? ' | ' : ' '}}と空白文字を入れることにより警告がなくなりました。
インライン要素の被りによる警告だと考えていたのですが、純粋にテキストが入っていないことに対する警告でした。
そして、<template>タグの使用有無とは関係がなかったです。

こちら