[Vue warn]: Impossible de trouver l'élément

166

J'utilise Vuejs . Voici mon balisage:

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

Voici 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?

javascript mvvm vue.js dopatraman
la source
1
Faire cela dans le pied de page ou l'en-tête?
Chris Baker
6
déplacer votre script vers un gestionnaire de fenêtre prêt
Arun P Johny
2
le gestionnaire prêt était le problème. semble idiot que la vue n'inclut pas cela ... @ArunPJohny - si vous soumettez une réponse avec un extrait de code, indiquez-la comme correcte.
dopatraman

Réponses:

317

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 raison pourrait être que vous avez placé votre script dans la 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 pourra pas trouver l'élément cible, d'où l'erreur.

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

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

Une autre syntaxe

window.addEventListener('load', function () {
    //your script
})
Arun P Johny
la source
4
hé merci, désolé pour le commentaire ici pourquoi vue js doit être chargé, dans la doc, il n'y a rien de dire, merci
Freddy Sidauruk
9
A noter également que la addEventListenerméthode est "techniquement" une approche plus maintenable car elle ne remplace pas la window.onloadpropriété globale .
joshwhatk
L'inclusion du script de bundle Webpack dans la <head></head>section est ce qui m'a causé l'erreur. L'attente du chargement de la fenêtre fonctionne.
Amin NAIRI
1
Aucun avertissement dans la console indiquant que les instructions de script contenant des références aux éléments DOM sont évaluées avant le chargement du DOM? Comment cela peut-il être un avertissement difficile à mettre en œuvre?
Tom Russell
70

J'ai résolu le problème en ajoutant l'attribut «defer» à l'élément «script».

Su Chuan
la source
Y a-t-il un effet secondaire avec l'utilisation de différer?
Mohammad Ali Akbari
1
Vous pouvez en savoir plus sur le fonctionnement de l' deferattribut de la balise de script ici . Cela retardera l'exécution du code JS jusqu'à ce que le DOM ait analysé, mais avant que l' onloadévénement de fenêtre ne soit déclenché.
JrBaconCheez
51

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

li bing zhao
la source
avant la fin du corps mais pas dans la tête? Qu'est-ce que cela signifie exactement?
daslicious
6
<script src = "index.js"> </script> </body>
li bing zhao
3
mettez votre code vue.js avant le </body>, les navigateurs chargeront d'abord le contenu du corps, puis chargeront le code vue.js, cela fonctionnera.
li bing zhao
1
Ran dans ce problème en utilisant Laravel et son mélange de laravel associé. Déplacement du chargement des js vers une fois que le corps l'a résolu.
john
24

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

<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'
    }
});
Tadas Stasiulionis
la source
0

Vous pouvez le résoudre de deux manières.

  1. Assurez-vous de mettre le CDN à la fin de la page html et placez votre propre script après cela. Exemple:
    <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>

où vous devez mettre le même code javascript que vous avez écrit dans n'importe quel autre fichier JavaScript ou dans un fichier html.

  1. Utilisez la fonction window.onload dans votre fichier JavaScript.
Nijat Mursali
la source
0

Je pense que parfois des erreurs stupides peuvent nous donner cette erreur.

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

À

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