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 me sale esta advertencia:
[Vue warn]: Cannot find element: #main¿Qué estoy haciendo mal?
Creo que el problema es que su secuencia de comandos se ejecuta antes de que el elemento dom de destino se cargue en el dom ... una razón podría ser que haya colocado su secuencia de comandos en el encabezado de la página o en una etiqueta de secuencia de comandos que se coloca antes del elemento div #main . Entonces, cuando se ejecuta el script, no podrá encontrar el elemento de destino, por lo tanto, el error.
Una solución es colocar su secuencia de comandos 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 })Resolví el problema agregando el atributo 'defer' al elemento 'script'.
Me sale el mismo error. la solución es poner su código de script antes del final del cuerpo, no en la sección de encabezado.