[Vue warn]：找不到元素

我正在使用Vuejs。这是我的标记：[Vue warn]：找不到元素

<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

我在做什么错？

来源

2015-04-07 dopatraman

这样做的页脚或页眉？ –

将脚本移至窗口准备处理程序 –

就绪处理程序是问题。似乎很愚蠢，vue不包括这... @ArunPJohny - 如果您提交一个答案与一个片段生病将它标记为正确的。 – dopatraman

141

我认为问题是你的脚本是在目标dom元素被加载到dom之前执行的......一个原因可能是你已经将你的脚本放置在页面的头部或放置在脚本标记中在div元素#main之前。所以当脚本执行时，它将无法找到目标元素，从而出现错误。

的一个解决办法是把你的脚本在Load事件处理程序像

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

另一个语法

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

来源

2015-04-07 05:45:28

嘿谢谢，对不起，这里评论为什么vue js需要加载它，在文档中没有说明，谢谢 –

另外值得注意的是，'addEventListener'方法在技术上是一种更可维护的方法，因为它不是压倒性的全局'window.onload'属性。 – joshwhatk

在''部分包含Webpack捆绑包脚本是导致我错误的原因。等待窗口被加载正在工作。 –

我得到同样的错误。解决方法是将脚本代码放在body的结尾，而不是放在head的部分。

来源

2016-11-14 16:44:31

之前身体结束但不在头部？那究竟是什么意思？ – daslicious

–

把你的vue.js代码放在之前，浏览器会先加载主体内容，然后加载vue.js代码，它会起作用。 –

我已经通过将属性'defer'添加到'script'元素来解决问题。

来源

2017-08-20 10:06:03

这是所有给出的最干净的解决方案，应该有更多upvotes！ –

有关延期的更多信息，请访问：https://www.w3schools.com/Tags/att_script_defer.asp –

简单的事情是把文件下面的脚本，只是你结束</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' 
    } 
});

来源

2017-10-01 16:42:25

[Vue warn]：找不到元素

回答

相关问题