nuxt.jsで以下のコードを実現したいのですが、<template>タグが予約語らしくエラーを吐かれてしまいます。
vue
1<p>最寄駅: 2 <template v-for="data, index in ['新橋','有楽町','東京']" :key="index"> 3 <a :href="`/?area=${data}`">{{data}}</a> 4 | 5 </template> 6</p>
そこで、ただ今<template>タグではなく、<span>タグにて代用しているのですが、インライン要素が被っているせいで警告が出てしまいます。
こちらを簡潔に実現する方法をご教示頂けると幸いです。
完成形イメージ
vue
1<p>【最寄駅】: 2<nuxt-link to="/shops/?nearby=新橋">新橋</nuxt-link> 3 | 4<nuxt-link to="/shops/?nearby=東京">東京</nuxt-link> 5 | 6<nuxt-link to="/shops/?nearby=東京">東京</nuxt-link> 7</p>
追記1
<template>タグを使用した際のエラーです。
bash
1Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): friendly-errors 15:52:17 2(Emitted value instead of an instance of Error) 3 4 Errors compiling template: 5 6 <template> cannot be keyed. Place the key on real elements instead.
追記2
今現在使用しているコードは以下になります。
shop.nearbyを['新橋','有楽町','東京']に読み替えて頂けると幸いです。
vue
1<p>【最寄駅】: 2<span class="shop-nearby" v-for="nearby, index in shop.nearby" 3 :key="`shop-nearby-${shop.title}-${index}`"> 4 <nuxt-link :to="`/shops/?nearby=${nearby}`">{{nearby}}</nuxt-link> 5 {{index != shop.nearby.length - 1 ? ' | ' : ''}} 6</span> 7</p>
追記3
今現在のコードでのvueクライアント側での警告は以下になります。
chrome
1[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.
回答3件
あなたの回答
tips
プレビュー