[Vue warn]: Impossibile trovare l'elemento

Sto usando Vuejs. Questo è il mio markup:[Vue warn]: Impossibile trovare l'elemento

<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 pagina ottengo questo avvertimento:

[Vue warn]: Cannot find element: #main

Che cosa sto facendo di sbagliato?

fonte

2015-04-07 dopatraman

Fare questo nel piè di pagina, o intestazione? –

sposta il tuo script su un gestore pronto per la finestra –

il gestore pronto era il problema. sembra sciocco che la vue non includa questo ... @ArunPJohny - se si invia una risposta con uno snippet, indicarlo come corretto. – dopatraman

141

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

Una soluzione è quella di inserire il vostro script nella gestione di eventi load come

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

Un'altra sintassi

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

fonte

2015-04-07 05:45:28

hey grazie, scusami per il commento qui perché vue js deve essere caricato, nel doc non c'è modo di dire, grazie –

Inoltre, il metodo 'addEventListener' è" tecnicamente "un approccio più gestibile perché non è prioritario la proprietà globale 'window.onload'. – joshwhatk

Includere lo script del bundle Webpack nella sezione '' 'è ciò che mi ha causato l'errore. In attesa che la finestra da caricare funzioni. –

ottengo lo stesso errore. la soluzione è inserire il codice dello script prima della fine del corpo, non nella sezione principale.

fonte

2016-11-14 16:44:31

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

–

inserire il codice vue.js prima della, i browser caricherà il contenuto del corpo prima, quindi caricare il codice vue.js, funzionerà. –

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

fonte

2017-08-20 10:06:03

Questa è la soluzione più pulita di tutte le date, dovrebbe avere più upvotes! –

Ulteriori informazioni sul differimento qui: https://www.w3schools.com/Tags/att_script_defer.asp –

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

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

app.js di file:

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

fonte

2017-10-01 16:42:25

[Vue warn]: Impossibile trovare l'elemento

risposta

Problemi correlati