[Vue警告]:找不到元素

我正在使用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

我做错了什么?

157798 次浏览
小开
最佳答案

我认为问题是你的脚本是在目标dom元素被加载到dom之前执行的…一个原因可能是你把你的脚本放在页面的头部，或者放在div元素#main之前的脚本标记中。因此，当脚本执行时，它将无法找到目标元素，从而出现错误。

一种解决方案是将脚本放在加载事件处理程序中，如

window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}

另一个语法

window.addEventListener('load', function () {
//your script
})
小开

得到同样的错误。解决方案是将脚本代码放在正文结尾之前，而不是放在头部部分。

小开

我已经通过添加属性'defer'到'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'
}
});
小开

有两种解决方法。

  1. 确保你把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代码写在任何其他javascript文件或html文件。

  1. 在JavaScript文件中使用window函数。
小开

我认为有时候愚蠢的错误会导致这种错误。

<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>

提交答案