2020年06月14日
nuxt.jsでの開発中に発生したエラーの対応
該当のエラー
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
翻訳すると
コンポーネントテンプレートには、ルートエレメントを1つだけ含める必要があります。
<template>
<h2>TOP PAGE</h2>
<img src="/img/sample.jpg" />
</template>
あ、これ凡ミスや…
つまり<template>タグの中のルートエレメントは1つだけにする必要があるのでコードを修正しました。
divタグを追加しその中に元々のタグを追加しました。
<template>
<div>
<h2>TOP PAGE</h2>
<img src="/img/sample.jpg" />
</div>
</template>
ゼロからnuxt.jsを環境構築をして開発してるとたまにタグを忘れがちなので注意せねばと自分への戒めを含めて記事にしました。
完