[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

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

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

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

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