[Vue 警告]：找不到元素
[英][Vue warn]: Cannot find element
问题描述
I'm using Vuejs .
我正在使用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?我究竟做错了什么？
6 个解决方案
解决方案1
355 已采纳 2015-04-07 05:45:28
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 .我认为问题是您的脚本在目标 dom 元素加载到 dom 之前执行...一个原因可能是您已将脚本放在页面的头部或放在 div 元素之前的脚本标记中#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
81 2017-08-20 10:06:03
我通过向 'script' 元素添加属性 'defer' 解决了这个问题。
解决方案3
58 2016-11-14 16:44:31
I get the same error.我犯了同样的错误。 the solution is to put your script code before the end of body, not in the head section.解决方案是将您的脚本代码放在正文末尾之前，而不是放在 head 部分中。
解决方案4
28 2017-10-01 16:42:25
The simple thing is to put the script below the document, just before your closing </body> tag:简单的事情是将脚本放在文档下方，就在结束</body>标记之前：
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
<script src="app.js"></script>
</body>
app.js file: app.js 文件：
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
解决方案5
1 2020-06-05 21:34:35
You can solve it in two ways.您可以通过两种方式解决它。
- Make sure you put the CDN into the end of html page and place your own script after that.确保将 CDN 放在 html 页面的末尾并在其后放置您自己的脚本。 Example:例子：
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></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.您需要将在任何其他 JavaScript 文件或 html 文件中编写的相同 javascript 代码放在此处。
- Use window.onload function in your JavaScript file.在 JavaScript 文件中使用window.onload函数。
解决方案6
1 2020-06-06 13:48:13
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.