Component template must contain exactly one root element
A component template must contain exactly one root element. If you are using v-if for multiple elements, use v-else-if for chaining them.
ERROR Failed to compile with 1 error
Error. /src/App.vue
(Emitted value instead of an Error instance) Template compilation error:
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
</div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Author
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Here's my default export
export default {
name: 'app',
firebase: {
books: booksRef
},
components: {
Hello
}
}
Which part should be corrected to remove the error?
+3
source to share
2 answers
Here's the fixed code:
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th> Title </th>
<th> Author</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
+3
source to share
A component template must contain exactly one root element.
<template>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</template>
this will fix
<template>
<div>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</div>
</template>
In your case
</div class="panel panel-default">
should be
<div class="panel panel-default">
Official documentation
In the official documentation, Conditional Rendering , it is possible to use multiple "multiples" of the root elements when using combinations of v-if
and v-else
.
<template v-if="true">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
+3
source to share