[Vue 警告]：找不到元素答案

【问题标题】：[Vue warn]: Cannot find element[Vue 警告]：找不到元素
【发布时间】：2015-06-11 15:03:26
【问题描述】：

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

我做错了什么？

【问题讨论】：

在页脚或页眉中执行此操作？
将您的脚本移动到窗口就绪处理程序
准备好的处理程序是问题所在。 vue 不包含这个似乎很愚蠢... @ArunPJohny - 如果您提交带有 sn-p 的答案，请将其标记为正确。
为什么这不包含在 Vue 文档中？我遇到了同样的问题，但这有效。

标签： javascript mvvm vue.js

【解决方案1】：

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

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

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

另一种语法

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

【讨论】：

嘿，谢谢，在这里评论为什么需要加载 vue js，在文档中没有说明，谢谢
还要注意，addEventListener 方法“技术上”是一种更易于维护的方法，因为它不会覆盖全局 window.onload 属性。
在<head></head> 部分中包含 Webpack 捆绑脚本是导致我出错的原因。正在等待加载窗口。
控制台中没有警告在加载 DOM 之前正在评估包含对 DOM 元素的引用的脚本语句？这怎么可能是一个难以实施的警告？

【解决方案2】：

我通过将属性“defer”添加到“脚本”元素解决了这个问题。

【讨论】：

使用 defer 有什么副作用吗？
您可以阅读更多关于脚本标签的defer 属性如何工作here。它将延迟运行 JS 代码，直到 DOM 解析完成，但 before 窗口 onload 事件被触发。

【解决方案3】：

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

【讨论】：

在正文结束之前但不在头部？这到底是什么意思？

【解决方案4】：

简单的事情是把脚本放在文档下面，就在你关闭</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】：

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

确保将 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】：

我认为有时愚蠢的错误会给我们这个错误。

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

【讨论】：