😺

Vue componentでtemplate以下のタグが2個存在 且つ v-forを利用する時

2020/09/17に公開2

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