[Vue警告]:找不到元素

2020/10/23 23:21 · javascript ·  · 0评论

我正在使用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因此,在执行脚本时,将无法找到目标元素,从而导致错误。

一种解决方案是将脚本放置在加载事件处理程序中,例如

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

另一种语法

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

我已经通过向'script'元素添加属性'defer'解决了这个问题。

我犯了同样的错误。解决方案是将脚本代码放在正文的末尾,而不是放在头部。

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

您可以通过两种方式解决它。

  1. 确保将CDN放在html页面的末尾,然后在其中放置自己的脚本。例:
    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/app.js"></script>

您需要在任何其他JavaScript文件或html文件中放置与编写的相同的JavaScript代码。

  1. 在JavaScript文件中使用window.onload函数。

我认为有时愚蠢的错误会给我们带来这种错误。

<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>
本文地址:http://javascript.askforanswer.com/vuejinggaozhaobudaoyuansu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!