:找不到元素

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

我究竟做错了什么?

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

一种解决方法是将脚本放在加载事件处理程序中

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

另一种语法

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

我犯了同样的错误。 解决的办法是把你的脚本代码放在body的结尾,而不是在head部分。

我已经通过将属性“延迟”添加到“脚本”元素来解决问题。

简单的事情就是把脚本放在文档的下面,就在closures</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' } });