[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

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

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

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/vue@2.6.11"></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.

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