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

我通过在'script'元素中添加属性'defer'来解决问题。

Answer 3

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

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页的末尾，然后在其中放置自己的脚本。示例：

x = 2
a = [1,2,3,4,5,6,7,8,9,10,11,12]
a.each_slice(x).to_a

您需要在任何其他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警告]：找不到元素

6 个答案: