Hi Guys ,
In this blog I will share information related to error : Component template should contain exactly one root element.
This error is related to template attribute .
Let us see the erroneous code .
You can notice that the template attribute starts with an h1 tag and then has a table tag . But in vue js the component template should have only one root element , so you have to enclose the entire component in one tag . To fix this I have removed the h1 tag.
Hope this resolves the issue . Thanks !
Youtube link :
The full error details is as below :
[Vue warn]: Error compiling template:
<h1>My data </h1>
<table>
<th>
<td>
Stock Name
</td>
<td>
Market Capitalization
</td>
</th>
<tr v-for = "a in stocks">
<td >
{{a.name}}
</td>
<td>
{{a.mCap}}
</td>
</tr>
</table>
- 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.
found in
---> <ByMarketCap>
<Anonymous>
<Root>
In this blog I will share information related to error : Component template should contain exactly one root element.
This error is related to template attribute .
Let us see the erroneous code .
template: `
<h1>My data </h1>
<table>
<th>
<td>
Stock Name
</td>
<td>
Market Capitalization
</td>
</th>
<tr v-for = "a in stocks">
<td >
{{a.name}}
</td>
<td>
{{a.mCap}}
</td>
</tr>
</table>
` ,
You can notice that the template attribute starts with an h1 tag and then has a table tag . But in vue js the component template should have only one root element , so you have to enclose the entire component in one tag . To fix this I have removed the h1 tag.
template: `
<table>
<th>
<td>
Stock Name
</td>
<td>
Market Capitalization
</td>
</th>
<tr v-for = "a in stocks">
<td >
{{a.name}}
</td>
<td>
{{a.mCap}}
</td>
</tr>
</table>
` ,
Hope this resolves the issue . Thanks !
Youtube link :
The full error details is as below :
[Vue warn]: Error compiling template:
<h1>My data </h1>
<table>
<th>
<td>
Stock Name
</td>
<td>
Market Capitalization
</td>
</th>
<tr v-for = "a in stocks">
<td >
{{a.name}}
</td>
<td>
{{a.mCap}}
</td>
</tr>
</table>
- 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.
found in
---> <ByMarketCap>
<Anonymous>
<Root>