[Vue warn]:找不到元素
[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
我做错了什么?
我认为问题是在将目标dom元素加载到dom之前执行了脚本。。。其中一个原因可能是您将脚本放置在页面的头部或放置在div元素#main
之前的脚本标记中。因此,当脚本被执行时,它将无法找到目标元素,从而导致错误。
一种解决方案是将脚本放在类似的加载事件处理程序中
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
另一种语法
window.addEventListener('load', function () {
//your script
})
我通过在"script"元素中添加属性"defer"解决了这个问题。
我得到了同样的错误。解决方案是将脚本代码放在正文末尾之前,而不是放在头部分。
简单的事情是将脚本放在文档下面,就在关闭</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'
}
});
您可以用两种方法来解决它。
- 确保您将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函数
我认为有时愚蠢的错误会给我们带来这种错误。
<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 warn]:找不到元素
- 在页面中找不到元素的正确位置.函数未考虑填充
- JQuery找不到元素
- 在Selenium Web驱动程序2.0中找不到元素
- 没有这样的元素:找不到元素:正在验证web元素是否丢失
- jQuery没有'找不到元素或其属性
- 量角器 3.1.1 + 角度 2:找不到元素的可测试性
- jQuery .each() 在 wooCommerce header cart list 中找不到元素
- jQuery 找不到元素
- getElementsByClassName() 在 Firefox 25 中找不到元素
- 在网页上找不到元素,因为它加载了基于javascript的错误并在几秒钟后隐藏(注册表单)
- 如果jQuery不抱怨/抛出错误'在选择器中找不到元素
- jQuery在ngView加载的元素[AngularJS]上找不到元素
- Rails/Javascript选择器赢得'找不到元素
- 可以'在window.deocument.forms[0]中找不到元素
- CasperJS找不到元素,即使我可以在开发人员工具中按CTRL-F它
- PHP或Javascript:找不到元素错误
- onRenderd在Meteor中找不到元素
- 为什么它找不到元素的内部 HTML
- ' getElementById '在' '标签中找不到元素