[Vue warn]: no se puede encontrar el elemento

166

Estoy usando Vuejs . Este es mi marcado:

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

Este es mi código:

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

Cuando cargo la página, aparece esta advertencia:

[Vue warn]: Cannot find element: #main

¿Qué estoy haciendo mal?

javascript mvvm vue.js dopatraman
fuente
1
¿Hacer esto en el pie de página o encabezado?
Chris Baker
66
mueva su script a un manejador listo para Windows
Arun P Johny
2
El controlador listo era el problema. parece tonto que vue no incluya esto ... @ArunPJohny: si envía una respuesta con un fragmento, márquelo como correcto.
dopatraman

Respuestas:

317

Creo que el problema es que su script se ejecuta antes de que el elemento dom objetivo se cargue en el dom ... una razón podría ser que ha colocado su script en el encabezado de la página o en una etiqueta de script que se coloca antes del elemento div #main. Entonces, cuando se ejecuta el script, no podrá encontrar el elemento objetivo, por lo tanto, el error.

Una solución es colocar su script en el controlador de eventos de carga como

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

Otra sintaxis

window.addEventListener('load', function () {
    //your script
})
Arun P Johny
fuente
44
hey gracias, perdón por comentar aquí por qué vue js necesita cargarlo, en el documento no se sabe, gracias
Freddy Sidauruk
9
También para tener en cuenta, el addEventListenermétodo es "técnicamente" un enfoque más sostenible porque no anula la window.onloadpropiedad global .
joshwhatk
Incluir el script del paquete Webpack en la <head></head>sección es lo que me causó el error. Esperando a que se cargue la ventana está funcionando.
Amin NAIRI
1
¿No hay advertencia en la consola de que las sentencias de script que contienen referencias a elementos DOM se están evaluando antes de cargar el DOM? ¿Cómo puede ser una advertencia difícil de implementar?
Tom Russell
70

He resuelto el problema agregando el atributo 'diferir' al elemento 'script'.

Su Chuan
fuente
¿Hay algún efecto secundario con el uso de diferir?
Mohammad Ali Akbari
1
Puede leer más sobre cómo funciona el deferatributo de la etiqueta de script aquí . Retrasará la ejecución del código JS hasta que se haya analizado el DOM, pero antes de que se active el onloadevento de ventana .
JrBaconCheez
51

Me sale el mismo error. la solución es poner el código de su script antes del final del cuerpo, no en la sección de cabecera.

li bing zhao
fuente
antes del final del cuerpo pero no en la cabeza? ¿Qué significa eso exactamente?
Daslicious
66
<script src = "index.js"> </script> </body>
li bing zhao
3
ponga su código vue.js antes del </body>, los navegadores cargarán primero el contenido del cuerpo, luego cargarán el código vue.js, funcionará.
li bing zhao
1
Me encontré con este problema al usar Laravel y su mezcla de laravel. Moviendo la carga del js después de que el cuerpo lo resolvió.
John
24

Lo simple es colocar el script debajo del documento, justo antes de la </body>etiqueta de cierre :

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

archivo app.js: 

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

Puedes resolverlo de dos maneras.

  1. Asegúrese de colocar el CDN al final de la página html y luego coloque su propio script. Ejemplo:
    <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>

donde necesita poner el mismo código javascript que escribió en cualquier otro archivo JavaScript o en un archivo html.

  1. Use la función window.onload en su archivo JavaScript.
Nijat Mursali
fuente
0

Creo que a veces los errores estúpidos pueden darnos este error.

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

A

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