[Vue warn]：要素が見つかりません

166

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

何が悪いのですか？

javascript mvvm vue.js

— ドパトラマン
ソース

1

これをフッター、またはヘッダーで行いますか？

— Chris Baker、

6

スクリプトをウィンドウ対応ハンドラーに移動します

— Arun Pジョニー2015

2

準備ができたハンドラーが問題でした。Vueにこれが含まれていないのはばかげているようです...

— dopatraman 2015

317

問題は、ターゲットのdom要素がdomにロードされる前にスクリプトが実行されることです... 1つの理由は、スクリプトをページのヘッドに配置したか、div要素の前に配置されたスクリプトタグに配置したことが考えられます#main。そのため、スクリプトを実行すると、ターゲット要素を見つけることができないため、エラーが発生します。

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

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

別の構文

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

— アルンPジョニー
ソース

4

こんにちは、コメントを申し訳ありません。なぜvue jsにロードする必要があるのか、ドキュメントでは

— わかり

9

また、このaddEventListenerメソッドはグローバルwindow.onloadプロパティをオーバーライドしないため、「技術的に」より保守しやすいアプローチです。

— joshwhatk 2017年

<head></head>セクションにWebpackバンドルスクリプトを含めると、エラーが発生しました。ウィンドウが読み込まれるのを待っています。

— アミンNAIRI 2017

1

DOMが読み込まれる前に、DOM要素への参照を含むスクリプトステートメントが評価されているというコンソールの警告はありませんか？これを実装するのが難しい警告になるのはなぜですか？

— トムラッセル

70

'script'要素に属性 'defer'を追加することで問題を解決しました。

— スチュアン
ソース

deferの使用には副作用がありますか？

— Mohammad Ali Akbari 2018

1

スクリプトタグのdefer属性がどのように機能するかについては、こちらをご覧ください。DOMが解析された後、ウィンドウonloadイベントが発生する前まで、JSコードの実行を遅らせます。

— JrBaconCheez

51

同じエラーが発生します。解決策は、スクリプトコードをヘッドセクションではなく、ボディの最後の前に置くことです。

— li bing zhao
ソース

体の終わりの前に、頭の中にないですか？それは正確にはどういう意味ですか？

— daslicious

6

— li bing zhao

3

</ body>の前にvue.jsコードを配置すると、ブラウザーは最初に本文コンテンツをロードし、次にvue.jsコードをロードします。

— li bing zhao 2016年

1

Laravelとそれに付随するlaravel-mixを使用しているときにこの問題に遭遇しました。本体がそれを解決した後にjsのロードを移動しました。

— ジョン

24

簡単なことは、スクリプトをドキュメントの下、終了</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'
    }
});

— タダス・スタシウリオニス
ソース

0

あなたは2つの方法でそれを解決することができます。

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コードを配置する必要がある場合。

使用して、window.onloadあなたのJavaScriptファイル内の関数を。

— ニジャットムルサリ
ソース

0

私は時々愚かな間違いが私たちにこのエラーを与えると思います。

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

— ニシャーグ・シャー
ソース