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?
This question is related to
javascript
mvvm
vue.js
I get the same error. the solution is to put your script code before the end of body, not in the head section.
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>
I've solved the problem by add attribute 'defer' to the 'script' element.
You can solve it in two ways.
<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.
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'
}
});
Source: Stackoverflow.com