[Vue警告]:找不到元素

dop*_*man 141 javascript mvvm vue.js

我正在使用Vuejs.这是我的标记:

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

这是我的代码:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
})
;
Run Code Online (Sandbox Code Playgroud)

当我加载页面时,我收到此警告:

[Vue warn]: Cannot find element: #main
Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么?

Aru*_*hny 285

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

一种解决方案是将脚本放在load事件处理程序中

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

另一种语法

window.addEventListener('load', function () {
    //your script
})
Run Code Online (Sandbox Code Playgroud)

  • 还要注意,`addEventListener`方法在技术上是一种更易于维护的方法,因为它不会覆盖全局`window.onload`属性. (8认同)
  • 嘿谢谢,对不起评论这里为什么vue js需要加载它,在文档中没有说明,谢谢 (4认同)
  • 在加载 DOM 之前,控制台中没有警告正在评估包含对 DOM 元素的引用的脚本语句?这怎么可能是一个难以实施的警告? (2认同)

小智 62

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


li *_*hao 45

我犯了同样的错误.解决方案是将脚本代码放在正文结尾之前,而不是在head部分.

  • <script src ="index.js"> </ script> </ body> (6认同)
  • 把你的vue.js代码放在</ body>之前,浏览器会首先加载正文内容,然后加载vue.js代码,它会起作用. (3认同)
  • 在使用 Laravel 及其附带的 laravel-mix 时遇到了这个问题。将 js 的加载移动到 body 解决之后。 (2认同)

Tad*_*nis 20

简单的做法是将脚本放在文档下方,就在结束</body>标记之前:

<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)

app.js文件:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});
Run Code Online (Sandbox Code Playgroud)