Showing posts with label vuejs. Show all posts
Showing posts with label vuejs. Show all posts

Saturday, September 7, 2019

Component template should contain exactly one root element.

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 .

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>

The "data" option should be a function that returns a per-instance value in component definitions.

Hi Guys ,

In this blog I will share information related to error : The "data" option should be a function that returns a per-instance value in component definitions.

This error is related to data attribute .

Let us see the erroneous code .

` ,
data : {
stocks : [
{"name" : "HDFC" , "mCap": "1000Cr"} ,
{"name" : "ICICI" , "mCap": "100Cr"}
]
}
}

The error is due to Vue expects the data attribute to contain a function .
Let us fix this by wrapping our data in a function .

` ,
data: function () {
return {
stocks: [
{ "name": "HDFC", "mCap": "1000Cr" },
{ "name": "ICICI", "mCap": "100Cr" }
]
}
}


Hope this resolves the issue . Thanks !
Youtube link below :





ec2-user@ec2 Permission denied