[Vue warn]: Nie można znaleźć elementu

166

Używam Vuejs . To jest mój znacznik:

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

To jest mój kod:

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

Kiedy ładuję stronę, otrzymuję takie ostrzeżenie:

[Vue warn]: Cannot find element: #main

Co ja robię źle?

javascript mvvm vue.js dopatraman
źródło
1
Robisz to w stopce lub nagłówku?
Chris Baker
6
przenieś swój skrypt do programu obsługującego okno
Arun P Johny
2
gotowy handler był problemem. wydaje się głupie, że vue nie zawiera tego ... @ArunPJohny - jeśli prześlesz odpowiedź z fragmentem źle oznacz ją jako poprawną.
dopatraman

Odpowiedzi:

317

Myślę, że problem polega na tym, że twój skrypt jest wykonywany przed załadowaniem docelowego elementu dom do domeny ... jednym z powodów może być to, że umieściłeś skrypt w nagłówku strony lub w tagu skryptu, który jest umieszczony przed elementem div #main. Więc kiedy skrypt jest wykonywany, nie będzie w stanie znaleźć elementu docelowego, więc błąd.

Jednym z rozwiązań jest umieszczenie skryptu w module obsługi zdarzeń ładowania, takim jak

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

Inna składnia

window.addEventListener('load', function () {
    //your script
})
Arun P Johny
źródło
4
hej dzięki, przepraszam za komentarz, dlaczego vue js trzeba go załadować, w dokumencie nie ma nic do powiedzenia, dzięki
Freddy Sidauruk
9
Warto również zauważyć, że addEventListenermetoda ta jest „technicznie” łatwiejszym do utrzymania podejściem, ponieważ nie przesłania window.onloadwłaściwości globalnej .
joshwhatk
Włączenie skryptu pakietu Webpack w <head></head>sekcji spowodowało błąd. Oczekiwanie na załadowanie okna działa.
Amin NAIRI
1
Brak ostrzeżenia w konsoli, że instrukcje skryptu zawierające odwołania do elementów DOM są oceniane przed załadowaniem DOM? Jak może to być trudne do wdrożenia ostrzeżenie?
Tom Russell,
70

Rozwiązałem problem, dodając atrybut „defer” do elementu „script”.

Su Chuan
źródło
Czy jest jakiś efekt uboczny używania odroczenia?
Mohammad Ali Akbari
1
Możesz przeczytać więcej o działaniu deferatrybutu tagu skryptu tutaj . Spowoduje to opóźnienie uruchomienia kodu JS do czasu przeanalizowania DOM, ale przed uruchomieniem onloadzdarzenia window .
JrBaconCheez
51

Otrzymuję ten sam błąd. rozwiązaniem jest umieszczenie kodu skryptu przed końcem treści, a nie w sekcji head.

li bing zhao
źródło
przed końcem ciała, ale nie w głowie? co to dokładnie oznacza?
daslicious
6
<script src = "index.js"> </script> </body>
li bing zhao
3
umieść swój kod vue.js przed </body>, przeglądarki najpierw załadują treść, a następnie kod vue.js, to zadziała.
li bing zhao
1
Napotkaliśmy ten problem podczas używania Laravel i towarzyszącej mu mieszanki laravel. Przeniesienie ładowania pliku js do miejsca, w którym ciało rozwiązało problem.
john
24

Najprościej jest umieścić skrypt pod dokumentem, tuż przed </body>tagiem zamykającym :

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

plik app.js: 

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});
Tadas Stasiulionis
źródło
0

Możesz go rozwiązać na dwa sposoby.

  1. Upewnij się, że umieściłeś CDN na końcu strony html, a następnie umieść swój własny skrypt. Przykład:
    <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>

gdzie musisz umieścić ten sam kod javascript, który napisałeś w dowolnym innym pliku JavaScript lub w pliku html.

  1. Użyj funkcji window.onload w pliku JavaScript.
Nijat Mursali
źródło
0

Myślę, że czasami głupie błędy mogą spowodować ten błąd.

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

Do

<div id="main"> <--- id without hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
Nisharg Shah
źródło