:找不到元素
我正在使用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' } });