CODEWITHSUNDEEP
javascriptmvvmvue.js
dopatraman
dopatraman

Reputation: 13908

[Vue warn]: Cannot find element

I'm using Vuejs. This is my markup:

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>

This is my code:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
})
;

When I load the page I get this warning:

[Vue warn]: Cannot find element: #main

What am I doing wrong?

Upvotes: 204

Views: 164786

Answers (6)

Nisharg Shah
Nisharg Shah

Reputation: 19522

I think sometimes stupid mistakes can give us this error.

<div id="#main"> <--- id with hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

To

<div id="main"> <--- id without hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

Upvotes: 0

mrconcerned
mrconcerned

Reputation: 1935

You can solve it in two ways.

  1. Make sure you put the CDN into the end of html page and place your own script after that. Example:
    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="js/app.js"></script>

where you need to put same javascript code you wrote in any other JavaScript file or in html file.

  1. Use window.onload function in your JavaScript file.

Upvotes: 2

Tadas Stasiulionis
Tadas Stasiulionis

Reputation: 1316

The simple thing is to put the script below the document, just before your closing </body> tag:

<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>

app.js file: 

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});

Upvotes: 29

Su Chuan
Su Chuan

Reputation: 851

I've solved the problem by add attribute 'defer' to the 'script' element.

Upvotes: 85

li bing zhao
li bing zhao

Reputation: 1418

I get the same error. the solution is to put your script code before the end of body, not in the head section.

Upvotes: 58

Arun P Johny
Arun P Johny

Reputation: 388316

I think the problem is your script is executed before the target dom element is loaded in the dom... one reason could be that you have placed your script in the head of the page or in a script tag that is placed before the div element #main. So when the script is executed it won't be able to find the target element thus the error.

One solution is to place your script in the load event handler like

window.onload = function () {
    var main = new Vue({
        el: '#main',
        data: {
            currentActivity: 'home'
        }
    });
}

Another syntax

window.addEventListener('load', function () {
    //your script
})

Upvotes: 370

Related Questions