[Vue warn]: Cannot find element

2019-01-17 09:18发布

站内文章 / JavaScript
14 0 0

问题:

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?

回答1:

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
})


回答2:

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



回答3:

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



回答4:

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'
    }
});


标签： javascript mvvm vue.js
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~