[Vue警告]：找不到元素

166

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

我究竟做错了什么？

javascript mvvm vue.js

— 多巴特拉曼
source

1

在页脚或页眉中执行此操作？

— 克里斯·贝克

6

将您的脚本移动到窗口准备好的处理程序中

— Arun P Johny 2015年

2

准备好的处理程序就是问题所在。vue不包含此内容似乎很可笑... @ArunPJohny-如果您提交的答案带有摘要错误，则将其标记为正确。

— dopatraman 2015年

317

我认为问题在于您的脚本是在将目标dom元素加载到dom中之前执行的...一个原因可能是您将脚本放置在页面的开头或放置在div元素之前的脚本标签中#main。因此，在执行脚本时，将无法找到目标元素，从而导致错误。

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

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

另一种语法

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

— 阿伦·P·约翰尼
source

4

嘿，谢谢，很抱歉在这里发表评论，为什么要加载vue js，在文档中没有说出来，谢谢

— Freddy Sidauruk

9

还要注意，该addEventListener方法是“技术上”更可维护的方法，因为它不会覆盖全局window.onload属性。

— joshwhatk

<head></head>导致该错误的原因是本节中包含Webpack捆绑脚本。等待加载窗口正在工作。

— 阿敏·奈里

1

在控制台中没有警告是否在加载DOM之前正在评估包含对DOM元素的引用的脚本语句？这怎么可能是难以实施的警告？

— 汤姆·罗素

70

我已经通过向'script'元素添加属性'defer'解决了这个问题。

— 苏川
source

使用defer有副作用吗？

— 穆罕默德·阿里·阿克巴里

1

您可以在此处阅读更多有关script标签defer属性如何工作的信息。它将延迟JS代码的运行，直到DOM被解析之后，但在onload触发window 事件之前。

— JrBaconCheez

51

我犯了同样的错误。解决方案是将脚本代码放在正文的末尾，而不是放在头部。

— 李炳钊
source

在身体末端之前而不是在头部之前？这到底是什么意思？

— 令人讨厌的

6

— li bing zhao

3

将您的vue.js代码放在</ body>之前，浏览器将首先加载正文内容，然后再加载vue.js代码，它将起作用。

— li bing zhao

1

在使用Laravel及其随附的laravel-mix时遇到此问题。在主体解析之后将js的加载移至。

— 约翰

24

简单的事情是将脚本放在文档的下方，就在结束</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'
    }
});

— 塔达斯·斯塔西里奥尼斯（Tadas Stasiulionis）
source

0

您可以通过两种方式解决它。

确保将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函数。

— 尼雅特·穆萨利（Nijat Mursali）
source

0

我认为有时候愚蠢的错误会给我们带来这种错误。

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

— 尼沙格·沙（Nisharg Shah）
source