[Vue warn]: impossibile trovare l'elemento

166

Sto usando Vuejs . Questo è il mio markup:

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

Questo è il mio codice:

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

Quando carico la pagina ricevo questo avviso:

[Vue warn]: Cannot find element: #main

Che cosa sto facendo di sbagliato?

javascript mvvm vue.js

— dopatraman
fonte

1

Fare questo nel piè di pagina o nell'intestazione?

— Chris Baker,

6

sposta la sceneggiatura in un gestore pronto per la finestra

— Arun P Johny,

2

il gestore pronto era il problema. sembra sciocco che Vue non includa questo ... @ArunPJohny - se invii una risposta con uno snippet la contrassegni come corretta.

— dopatraman

317

Penso che il problema sia che il tuo script viene eseguito prima che l'elemento dom di destinazione venga caricato nel dom ... uno dei motivi potrebbe essere che hai inserito il tuo script in testa alla pagina o in un tag di script che è posto prima dell'elemento div #main. Quindi, quando lo script viene eseguito, non sarà in grado di trovare l'elemento target, quindi l'errore.

Una soluzione è posizionare lo script nel gestore degli eventi di caricamento come

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

Un'altra sintassi

window.addEventListener('load', function () {
    //your script
})

— Arun P Johny
fonte

4

ehi grazie, scusa per il commento qui perché vue js deve essere caricato, nel documento non c'è modo di dire, grazie

— Freddy Sidauruk

9

Inoltre, il addEventListenermetodo è "tecnicamente" un approccio più gestibile perché non ignora la window.onloadproprietà globale .

— joshwhatk,

Includere lo script del bundle Webpack nella <head></head>sezione è ciò che mi ha causato l'errore. In attesa del caricamento della finestra funziona.

— Amin NAIRI,

1

Nessun avviso nella console che le istruzioni di script contenenti riferimenti a elementi DOM vengono valutate prima del caricamento del DOM? Come può essere un avvertimento difficile da attuare?

— Tom Russell,

70

Ho risolto il problema aggiungendo l'attributo 'differisci' all'elemento 'script'.

— Su Chuan
fonte

C'è qualche effetto collaterale con l'uso del differimento?

— Mohammad Ali Akbari,

1

Puoi leggere di più su come funziona l' deferattributo del tag script qui . Ritarderà l'esecuzione del codice JS fino a dopo l'analisi del DOM, ma prima dell'attivazione onloaddell'evento window .

— JrBaconCheez,

51

Ho fatto lo stesso errore. la soluzione è mettere il codice dello script prima della fine del corpo, non nella sezione head.

— li bing zhao
fonte

prima della fine del corpo ma non nella testa? cosa significa esattamente?

— Daslicious

6

— li bing zhao

3

metti il tuo codice vue.js prima di </body>, i browser caricheranno prima il contenuto del corpo, quindi caricheranno il codice vue.js, funzionerà.

— Li Bing Zhao,

1

Ho affrontato questo problema usando Laravel e il suo mix di laravel di accompagnamento. Spostando il caricamento di js dopo che il corpo lo ha risolto.

— Giovanni

24

La cosa semplice è mettere lo script sotto il documento, appena prima della chiusura </body> tag di :

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

file app.js:

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

— Tadas Stasiulionis
fonte

0

Puoi risolverlo in due modi.

Assicurati di inserire la CDN alla fine della pagina HTML e posizionare il tuo script dopo quello. Esempio:

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

dove devi inserire lo stesso codice javascript che hai scritto in qualsiasi altro file JavaScript o file html.

Usa la funzione window.onload nel tuo file JavaScript.

— Nijat Mursali
fonte

0

Penso che a volte errori stupidi possano darci questo errore.

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

Per

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

— Nisharg Shah
fonte