[Vue warn]: 找不到元素

Question

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

我做错了什么？

Answer 1

我认为问题在于您的脚本是在目标 dom 元素加载到 dom 之前执行的...一个原因可能是您将脚本放在了页面或放置在 div 元素 #main 之前的脚本标记中。因此，当脚本执行时，它将无法找到目标元素，因此会出现错误。

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

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

另一种语法

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

Answer 2

我得到了同样的错误。解决方案是将您的脚本代码放在 body 末尾之前，而不是放在 head 部分。

Answer 3

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

Answer 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'
    }
});

Answer 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 函数。

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

[Vue warn]: 找不到元素

[Vue warn]: Cannot find element

javascript

mvvm

vue.js