[Vue 警告]：找不到元素

javascript vue.js mvvm

2022-08-30 01:20:11

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

我做错了什么？

答案 1

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

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

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

另一种语法

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

答案 2

我通过在“脚本”元素中添加属性“defer”来解决这个问题。

[Vue 警告]： 找不到元素