【Vue.js】エラー:Component template should contain exactly one root elementが発生する場合の対処

【Vue.js】エラー:Component template should contain exactly one root elementが発生する場合の対処

今回は、Vue.jsでうまく動かず、コンソールに
Component template should contain exactly one root element
というエラーが出ている場合の対処法と、その原因について説明します٩( ᐛ )و

Component template should contain exactly one root elementとは?

まずは解決方法

コンポーネントを書いている時に、このエラーに出くわすことがあるでしょう。
その場合、見直すべきは、コンポーネントの定義のtemplateプロパティです。

以下のような書き方をしていませんか?

それを以下のように書きかえてみてください。
つまり、templateプロパティに指定している要素をdiv要素で囲んでください

すると、エラーが発生しなくなるはずです!

エラーの原因は?

このエラーについて、Vue.jsの公式サイトでも説明されています。

公式サイトでの説明はこうです。

Vue はすべてのコンポーネントに単一のルート要素が必要ということを示すエラーを表示します。

つまり、コンポーネントは、一つの要素にまとめられるようにしないとダメということです。

うまくいかなった例を見ると、h2要素とp要素が一つの要素に囲われていないことがわかります。
これを、div要素で囲んであげることで、「単一のルート要素」でまとめたということになります。

まとめ

エラー文を読めば、なんとなく直すべきところは見当がつきそうな気もしますが、なぜこれがエラーになるのかが、ちょっとわかりにくいですよね。
とにかく、Vue.jsでは、コンポーネントはあくまで一つの要素と内包する子要素を返すという感覚で覚えておけばいいかもしれません。

では。