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>
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 :
In this blog I will share information related to error : ReferenceError: MongoClient is not defined .
This error is related to the node.js code which is trying to connect to the database . To fix this check the following lines of code highlighted in yellow . You need to make sure module mongodb is imported and the MongoClient is referenced using the variable .
You might have faced an error like MongoNetworkError: failed to connect to server [localhost:27017] on first connect [MongoNetworkError: connect ECONNREFUSED 127.0.0.1:27017]
We generally face this error when the database server is down , if you bring the database server up you will not face this error .
The full error is as follows :
(node:15564) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect. F:\\study\nodejs\node_modules\mongodb\lib\topologies\server.js:240 throw err; ^ MongoNetworkError: failed to connect to server [localhost:27017] on first connect [MongoNetworkError: connect ECONNREFUSED 127.0.0.1:27017] at Pool.<anonymous> (F:\\study\nodejs\node_modules\mongodb-core\lib\topologies\server.js:431:11) at emitOne (events.js:116:13) at Pool.emit (events.js:211:7) at connect (F:\\study\nodejs\node_modules\mongodb-core\lib\connection\pool.js:557:14) at makeConnection (F:\\study\nodejs\node_modules\mongodb-core\lib\connection\connect.js:39:11) at callback (F:\\study\nodejs\node_modules\mongodb-core\lib\connection\connect.js:261:5) at Socket.err (F:\\study\nodejs\node_modules\mongodb-core\lib\connection\connect.js:286:7) at Object.onceWrapper (events.js:315:30) at emitOne (events.js:116:13) at Socket.emit (events.js:211:7)
The code snipped to connect to mongo db is as follows :