web-dev-qa-db-fra.com

[Vue warn]: élément introuvable

J'utilise Vuejs . Ceci est mon balisage:

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

Ceci 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 mal?

javascriptmvvmvue.js
132
dopatraman

Je pense que le problème est que votre script est exécuté avant que l'élément dom cible soit chargé dans le dom ... une des raisons peut être que vous avez placé votre script dans l'en-tête de la page ou dans une balise de script placée avant l'élément div #main. Ainsi, lorsque le script est exécuté, il ne peut pas trouver l'élément cible, donc l'erreur.

Une solution consiste à placer votre script dans le gestionnaire d'événements load, comme

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

Une autre syntaxe

window.addEventListener('load', function () {
    //your script
})
267
Arun P Johny

J'ai résolu le problème en ajoutant l'attribut 'différer' à l'élément 'script'.

59
Su Chuan

J'ai la même erreur. la solution consiste à placer votre code de script avant la fin du corps, pas dans la section head.

45
li bing zhao

Le plus simple est de placer le script sous le document, juste avant la balise de fermeture </body>:

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

fichier app.js:

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