dopatraman
Ich benutze Vuejs. Dies 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 bekomme ich diese Warnung:
[Vue warn]: Cannot find element: #main
Was mache ich falsch?
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 also ausgeführt wird, kann es das Zielelement nicht finden, also den Fehler.
Eine Lösung besteht darin, Ihr Skript im Load-Event-Handler wie zu platzieren
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
Eine andere Syntax
window.addEventListener('load', function () {
//your script
})
Hey, danke, entschuldige den Kommentar hier, warum vue js geladen werden muss, im Dokument ist nichts zu sagen, danke
– Freddy Sidauruk
18. März 2016 um 4:55 Uhr
Auch zu beachten, die addEventListener -Methode ist “technisch” ein wartungsfreundlicherer Ansatz, da sie die globale nicht überschreibt window.onload Eigentum.
– joshwhatk
6. Januar 2017 um 22:11 Uhr
Einschließen des Webpack-Bundle-Skripts in die <head></head> Abschnitt hat mir den Fehler verursacht. Das Warten auf das Laden des Fensters funktioniert.
– Amin NAIRI
29. August 2017 um 10:02 Uhr
Keine Warnung in der Konsole, dass Skriptanweisungen mit Verweisen auf DOM-Elemente ausgewertet werden, bevor das DOM geladen wird? Wie kann dies eine schwierig umzusetzende Warnung sein?
– Tom Russel
10. September 2018 um 22:04 Uhr
Ich habe das Problem gelöst, indem ich dem Element „script“ das Attribut „defer“ hinzugefügt habe.
Gibt es Nebenwirkungen bei der Verwendung von defer?
– Mohammad Ali Akbari
21. September 2018 um 16:51 Uhr
Sie können mehr darüber lesen, wie das Skript-Tag funktioniert defer Attribut funktioniert hier. Es wird die Ausführung des JS-Codes verzögern, bis das DOM geparst wurde, aber Vor das Fenster onload Ereignis wird ausgelöst.
– TechPrime
2. März 2020 um 17:38 Uhr
Ich bekomme den gleichen Fehler. Die Lösung besteht darin, Ihren Skriptcode vor das Ende von body zu setzen, nicht in den head-Abschnitt.
vor dem Ende des Körpers, aber nicht im Kopf? was bedeutet das genau?
– köstlich
14. November 2016 um 19:10 Uhr
– li bing zhao
16. November 2016 um 15:22 Uhr
Setzen Sie Ihren vue.js-Code vor den
, die Browser laden zuerst den Body-Inhalt und laden dann den vue.js-Code, es wird funktionieren.– li bing zhao
16. November 2016 um 15:25 Uhr
Auf dieses Problem gestoßen, als ich Laravel und den dazugehörigen Laravel-Mix verwendet habe. Verschieben des Ladens des js nach dem Lösen des Körpers.
– John
2. März 2019 um 3:05 Uhr
Die einfache Sache besteht darin, das Skript kurz vor dem Schließen unter das Dokument zu setzen </body> Schild:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
<script src="https://stackoverflow.com/questions/29484431/app.js"></script>
</body>
app.js-Datei:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
Sie können es auf zwei Arten lösen.
<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>
wo Sie denselben Javascript-Code einfügen müssen, den Sie in eine andere JavaScript-Datei oder in eine HTML-Datei geschrieben haben.
Nisharg Schah
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>
Tun Sie dies in der Fußzeile oder Kopfzeile?
– Chris Baker
7. April 2015 um 5:33 Uhr
Verschieben Sie Ihr Skript in einen fensterbereiten Handler
– Arun P. Johny
7. April 2015 um 5:35 Uhr
Der bereite Handler war das Problem. scheint albern, dass vue dies nicht enthält … @ArunPJohny – wenn Sie eine Antwort mit einem Snippet einreichen, markieren Sie es als richtig.
– Dopatraman
7. April 2015 um 5:38 Uhr
Warum ist dies nicht in den Vue-Dokumenten enthalten? Ich hatte das gleiche Problem, aber das hat funktioniert.
– pythonNeuling
23. April 2021 um 17:42 Uhr