Vue componentでtemplate以下のタグが2個存在 且つ v-forを利用する時
Vueのcomponent内でtemplate以下のタグが2個存在する場合に、配列を回す時に出るエラー対応。
Nuxt + Vuetify.jsで遭遇
Vuetifyでlist作る時に v-list
使ったりするけれども、
v-list
内で展開する要素って v-list-item
だけでなく v-divider
もあったりするわけで。
Vuetifyに限らずVueでcomponentファイル作る時にtemplate以下のタグが2個存在する場合ってざらにある。
template以下のタグが2個存在する下記のような書き方だと
<template>
<h1>タイトル</h1>
<p>本文</p>
</template>
下記のエラーメッセージが出る。
Errors compiling template: Cannot use <template> as component root element because it may contain multiple nodes.
v-for回さない通常のcomponentでタグ2個の場合は、下記のようにdiv1個で括ればエラーは無くなるが、
<template>
<div>
<h1>タイトル</h1>
<p>本文</p>
</div>
</template>
v-forで配列回したい場合は、divのとこにprops渡したくなる。
<template>
<div v-for="item in items">
<h1>タイトル</h1>
<p>本文</p>
</div>
</template>
しかし上記の書き方だと
Errors compiling template: Cannot use v-for on stateful component root element because it renders multiple elements.
というエラーが出てしまう。
v-for回す用のdivを更にdivで囲ってあげるとエラーは出ない。
<template>
<div>
<div v-for="item in items">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
</template>
エラー出ないけど、気持ち悪い…。
componentを差し込むものによっては、divで囲いたくない場合も出てきそう…。
ちなみにVuetifyの v-item
でやると下記みたいな感じになる…。
<template>
<div>
<div v-for="item in items">
<v-list-item>
<v-list-item-content>
<v-list-item-title>
タイトル
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
</div>
</div>
</template>
下記は、 v-list
をcomponentの中に迎えて少しマシに見えるようにしたもの。
この書き方ならcompile後の .v-list-item
のdivに role="listitem"
が付与されるのでマシかもしれない。
<template>
<v-list>
<div v-for="item in items">
<v-list-item>
<v-list-item-content>
<v-list-item-title>
タイトル
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
</div>
</v-list>
</template>
Discussion
Vue 3 で素直にできるようになるそうなので、そろそろリリースされてほしい
なるほど、fragmentの導入ですね!
ありがとうございます。
リリース待ち遠しいですねー。