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 :

Linux important commands

sudo :
Switch to super user
sudo su
chmod :



ssh : protocol to log into remote system.

grep : Global Regular Expression Print

nohup :
example : run java without holding the current session.

nohup java -jar a.jar &

Spring Boot Interview Questions

• What is auto configuration ?

ReferenceError: MongoClient is not defined

Hi Guys ,

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 .

	var mongo = require('mongodb');
	var url = "mongodb://localhost:27017/qanda";
	mongo.MongoClient.connect(url, function(err, db) {
	if (err) throw err;
	console.log("Database created!");
	db.close();
	});

Please make changes to the code and retest . Hope this will help you in resolving this issue .

MongoNetworkError: failed to connect to server MongoNetworkError: connect ECONNREFUSED

Hi Guys ,

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 :

	var mongo = require('mongodb');
	var url = "mongodb://localhost:27017/qanda";
	mongo.MongoClient.connect(url, function(err, db) {
	if (err) throw err;
	console.log("Database created!");
	db.close();
	});

• 
  

Karma Interview Questions

This blog is just for revision .

• How do you install Karma