web-dev-qa-db-ja.com

[警告]：要素が見つかりません

私は 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

何がおかしいのですか？

javascriptmvvmvue.js
125
dopatraman

問題は、ターゲットのdom要素がdomにロードされる前にスクリプトが実行されることだと思います。1つの理由は、スクリプトをページの先頭またはdiv要素の前に配置されたscriptタグに配置したことです。 #main。そのため、スクリプトが実行されると、ターゲット要素、つまりエラーを見つけることができません。

1つの解決策は、スクリプトをloadイベントハンドラに配置することです。

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

他の構文

window.addEventListener('load', function () {
    //your script
})
252
Arun P Johny

'script'要素に 'defer'属性を追加して問題を解決しました。

56
Su Chuan

私は同じエラーが出ます。解決策は、スクリプトコードをheadセクションではなくbodyの最後に置くことです。

44
li bing zhao

簡単なことは、スクリプトを閉じる</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'
    }
});
18
Tadas Stasiulionis