タイトル: Emitted value instead of an instance of Error
SEOタイトル: 【Vue.jsエラー】Emitted value instead of an instance of Error
| この記事の要点 |
|---|
|
エラーの状況
(Emitted value instead of an instance of Error)
Error compiling template:
...
...
- 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.Vue 2 系の制約: 1 つのコンポーネントテンプレートにはルート要素が 1 つだけでなければなりません。
原因と対処
原因 1: 複数のルート要素
ヘッダー
本文
ヘッダー
本文
原因 2: 条件分岐で複数ルート
ようこそ
ログインしてください
読込中
完了
エラー
読込中
完了
エラー
原因 3: コメントが影響することも
本体
本体
原因 4: 改行 / テキストノードが混在
テキスト
div
テキスト
div
Vue 3 ではマルチルート可
Vue 3 から「Fragments」が導入され、複数ルート要素 OK になりました:
ヘッダー
本文
属性の継承注意
ヘッダー
本文
Vue 2 で複数ルートを扱う方法
① Functional Component
② JSX で複数ルート (Babel + jsx プラグイン)
export default {
render() {
return [
ヘッダー ,
本文 ,
];
}
};③ タグ複数（v-for / v-if のみ）
- {{ item.name }}
関連エラー
| エラー | 意味 |
|---|---|
| Component template should contain exactly one root element | 同じエラー（このページ） |
| v-if/v-else-if/v-else used on different elements | v-if/v-else が別要素にある |
| Multiple root nodes returned from render function | render() が配列を返すが Vue 2 |
| Failed to mount component: template or render function not defined | template も render() もない |
| Cannot read property of undefined (in template) | data 未定義 or 非同期未完了でアクセス |
Vue 2 → 3 移行のメリット
- Fragments: 複数ルート可、不要な wrapper div 削減
- Composition API: ロジック再利用がより柔軟
- パフォーマンス向上: 仮想 DOM の最適化
- TypeScript サポート強化
- Vite 連携: ビルド高速化
- Vue 2 は 2024-01 EOL: セキュリティパッチも終了、移行推奨