我用的是Vuejs。这是我的加价:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
</body>
这是我的代码:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
})
;
当我加载页面时，我得到这个警告:
[Vue warn]: Cannot find element: #main
我做错了什么?
当前回答
我认为问题是你的脚本是在目标dom元素被加载到dom之前执行的…一个原因可能是您将脚本放在页面的头部，或者放在div元素#main之前的脚本标记中。因此，当脚本执行时，它将无法找到目标元素，从而出现错误。
一种解决方案是将脚本放在加载事件处理程序中，如
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
另一个语法
window.addEventListener('load', function () {
//your script
})
其他回答
简单的方法是将脚本放在文档下面，就在</body>结束标记之前:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
<script src="app.js"></script>
</body>
app.js文件:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
得到同样的错误。解决方案是将脚本代码放在正文结尾之前，而不是放在头部部分。
我认为有时候愚蠢的错误会导致这种错误。
<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>
我认为问题是你的脚本是在目标dom元素被加载到dom之前执行的…一个原因可能是您将脚本放在页面的头部，或者放在div元素#main之前的脚本标记中。因此，当脚本执行时，它将无法找到目标元素，从而出现错误。
一种解决方案是将脚本放在加载事件处理程序中，如
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
另一个语法
window.addEventListener('load', function () {
//your script
})
我已经通过添加属性'defer'到'script'元素解决了这个问题。
