[Vue warn]: Element kann nicht gefunden werden

166

Ich benutze Vuejs . Das ist mein Markup:

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>

Das ist mein Code:

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

Wenn ich die Seite lade, erhalte ich folgende Warnung:

[Vue warn]: Cannot find element: #main

Was mache ich falsch?

javascript mvvm vue.js Dopatraman
quelle
1
Tun Sie dies in der Fußzeile oder in der Kopfzeile?
Chris Baker
6
Verschieben Sie Ihr Skript in einen fensterbereiten Handler
Arun P Johny
2
Der fertige Handler war das Problem. scheint albern, dass vue dies nicht enthält ... @ArunPJohny - wenn Sie eine Antwort mit einem Ausschnitt einreichen, markieren Sie sie als richtig.
Dopatraman

Antworten:

317

Ich denke, das Problem ist, dass Ihr Skript ausgeführt wird, bevor das Ziel-Dom-Element in das Dom geladen wird. Ein Grund könnte sein, dass Sie Ihr Skript im Kopf der Seite oder in einem Skript-Tag platziert haben, das vor dem div-Element platziert ist #main. Wenn das Skript ausgeführt wird, kann es das Zielelement und damit den Fehler nicht finden.

Eine Lösung besteht darin, Ihr Skript wie im Ladeereignishandler zu platzieren

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

Eine andere Syntax

window.addEventListener('load', function () {
    //your script
})
Arun P Johny
quelle
4
hey danke, sorry für den Kommentar hier, warum vue js geladen werden muss, in der doc gibt es keine
Aussage
9
Zu beachten ist auch, dass die addEventListenerMethode "technisch" ein besser zu wartender Ansatz ist, da sie die globale window.onloadEigenschaft nicht überschreibt .
Joshwhatk
Das Einfügen des Webpack-Bundle-Skripts in den <head></head>Abschnitt hat den Fehler verursacht. Das Warten auf das Laden des Fensters funktioniert.
Amin NAIRI
1
Keine Warnung in der Konsole, dass Skriptanweisungen, die Verweise auf DOM-Elemente enthalten, ausgewertet werden, bevor das DOM geladen wird? Wie kann es schwierig sein, diese Warnung umzusetzen?
Tom Russell
70

Ich habe das Problem gelöst, indem ich dem Element 'script' das Attribut 'defer' hinzugefügt habe.

Su Chuan
quelle
Gibt es irgendwelche Nebenwirkungen bei der Verwendung von Defer?
Mohammad Ali Akbari
1
Weitere Informationen zur Funktionsweise des deferAttributs des Skript-Tags finden Sie hier . Die Ausführung des JS-Codes wird verzögert, bis das DOM analysiert wurde, aber bevor das Fensterereignis onloadausgelöst wird.
JrBaconCheez
51

Ich bekomme den gleichen Fehler. Die Lösung besteht darin, Ihren Skriptcode vor das Ende des Körpers zu stellen, nicht in den Kopfbereich.

li bing zhao
quelle
vor dem Ende des Körpers, aber nicht im Kopf? was bedeutet das genau
Daslicious
6
<script src = "index.js"> </ script> </ body>
li bing zhao
3
Stellen Sie Ihren vue.js-Code vor das </ body>. Die Browser laden zuerst den Body-Inhalt und dann den vue.js-Code. Es funktioniert.
Li Bing Zhao
1
Ich bin auf dieses Problem gestoßen, als ich Laravel und den dazugehörigen Laravel-Mix verwendet habe. Verschieben Sie das Laden des js nach, nachdem der Körper es gelöst hat.
John
24

Die einfache Sache ist, das Skript direkt vor Ihrem schließenden </body>Tag unter das Dokument zu setzen :

<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>

app.js Datei: 

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});
Tadas Stasiulionis
quelle
0

Sie können es auf zwei Arten lösen.

  1. Stellen Sie sicher, dass Sie das CDN am Ende der HTML-Seite platzieren und danach Ihr eigenes Skript platzieren. Beispiel:
    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="js/app.js"></script>

Hier müssen Sie denselben Javascript-Code einfügen, den Sie in eine andere JavaScript-Datei oder in eine HTML-Datei geschrieben haben.

  1. Verwenden Sie die Funktion window.onload in Ihrer JavaScript-Datei.
Nijat Mursali
quelle
0

Ich denke manchmal können dumme Fehler uns diesen Fehler geben.

<div id="#main"> <--- id with hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

Zu

<div id="main"> <--- id without hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
Nisharg Shah
quelle