Menu
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
})
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.
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'
}
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With