[Vue warn]: impossible de trouver l'élément
J'utilise Vuejs . C'est mon balisage:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
</body>
C'est mon code:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
})
;
, Lorsque je charge la page, je reçois cet avertissement:
[Vue warn]: Cannot find element: #main
Qu'est-ce que je fais de mal?
4 réponses
Je pense que le problème est que votre script est exécuté avant que l'élément DOM cible ne soit chargé dans le dom... une des raisons pourrait être que vous avez placé votre script dans la tête de la page ou dans une balise de script qui est placée avant l'élément div #main. Ainsi, lorsque le script est exécuté, il ne sera pas en mesure de trouver l'élément cible, donc l'erreur.
Une solution consiste à placer votre script dans le gestionnaire d'événements de charge comme
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
Une Autre syntaxe
window.addEventListener('load', function () {
//your script
})
J'ai résolu le problème en ajoutant l'attribut 'defer' à l'élément 'script'.
Je reçois la même erreur. la solution est de mettre votre code de script avant la fin du corps, pas dans la section head.
La chose simple est de mettre le script sous le document, juste avant votre fermeture </body> tag:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
<script src="app.js"></script>
</body>
App.fichier js:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});