[Vue 警告]：找不到元素
[英][Vue warn]: Cannot find element
问题描述
我正在使用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
我究竟做错了什么？
6 个解决方案
解决方案1
355 已采纳 2015-04-07 05:45:28
我认为问题是您的脚本在目标 dom 元素加载到 dom 之前执行...一个原因可能是您已将脚本放在页面的头部或放在 div 元素之前的脚本标记中#main 。 因此，当脚本执行时，它将无法找到目标元素，从而导致错误。
一种解决方案是将您的脚本放在加载事件处理程序中，例如
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
另一种语法
window.addEventListener('load', function () {
//your script
})
解决方案2
81 2017-08-20 10:06:03
我通过向 'script' 元素添加属性 'defer' 解决了这个问题。
解决方案3
58 2016-11-14 16:44:31
我犯了同样的错误。 解决方案是将您的脚本代码放在正文末尾之前，而不是放在 head 部分中。
解决方案4
28 2017-10-01 16:42:25
简单的事情是将脚本放在文档下方，就在结束</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'
}
});
解决方案5
1 2020-06-05 21:34:35
您可以通过两种方式解决它。
- 确保将 CDN 放在 html 页面的末尾并在其后放置您自己的脚本。 例子：
<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>
您需要将在任何其他 JavaScript 文件或 html 文件中编写的相同 javascript 代码放在此处。
- 在 JavaScript 文件中使用window.onload函数。
解决方案6
1 2020-06-06 13:48:13
我认为有时愚蠢的错误会给我们带来这个错误。
<div id="#main"> <--- id with hashtag
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
到
<div id="main"> <--- id without hashtag
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
[Vue 警告]：未知的自定义元素：... - 您是否正确注册了组件？
[英][Vue warn]:Unknown custom element: ... -did you register the component correctly?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.