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've solved the problem by add attribute 'defer' to the 'script' element.
I get the same error. the solution is to put your script code before the end of body, not in the head section.
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.
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>
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