[Vue warn]: Não foi possível encontrar o elemento

166

Estou usando o Vuejs . Esta é a minha marcação:

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

Este é o meu código:

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

Quando carrego a página, recebo este aviso:

[Vue warn]: Cannot find element: #main

O que estou fazendo de errado?

javascript mvvm vue.js dopatraman
fonte
1
Fazendo isso no rodapé ou cabeçalho?
31515 Chris Smith Baker
6
mover o seu roteiro para um manipulador pronto janela
Arun P Johny
2
o manipulador pronto era o problema. parece bobagem que o vue não inclua isso ... @ArunPJohny - se você enviar uma resposta com um snippet, marque-a como correta.
Dopatraman

Respostas:

317

Eu acho que o problema é que seu script é executado antes que o elemento dom de destino seja carregado no dom ... uma razão pode ser que você colocou seu script na cabeça da página ou em uma tag de script que é colocada antes do elemento div #main. Portanto, quando o script for executado, não será possível encontrar o elemento de destino, portanto, o erro.

Uma solução é colocar seu script no manipulador de eventos de carregamento, como

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

Outra sintaxe

window.addEventListener('load', function () {
    //your script
})
Arun P Johny
fonte
4
hey graças, pena de comentário aqui porque js vue precisa ser carga que, no doc não há a dizer, graças
Freddy Sidauruk
9
Observe também que o addEventListenermétodo é "tecnicamente" uma abordagem mais sustentável, porque não está substituindo a window.onloadpropriedade global .
precisa saber é o seguinte
Incluir o script do pacote Webpack na <head></head>seção foi o que me causou o erro. Aguardar o carregamento da janela está funcionando.
Amin NAIRI 29/08/17
1
Nenhum aviso no console de que instruções de script contendo referências a elementos DOM estão sendo avaliadas antes do carregamento do DOM? Como isso pode ser um aviso difícil de implementar?
Tom Russell
70

Resolvi o problema adicionando o atributo 'adiar' ao elemento 'script'.

Su Chuan
fonte
Existe algum efeito colateral com o uso do adiamento?
Mohammad Ali Akbari
1
Você pode ler mais sobre como o deferatributo da tag de script funciona aqui . Ele atrasará a execução do código JS até que o DOM tenha sido analisado, mas antes que o onloadevento da janela seja acionado.
JrBaconCheez 02/03
51

Eu recebo o mesmo erro. a solução é colocar seu código de script antes do final do corpo, não na seção principal.

li bing zhao
fonte
antes do fim do corpo, mas não na cabeça? o que isso significa exatamente?
daslicious
6
<script src = "index.js"> </script> </body>
li zing zhao 16/11
3
coloque seu código vue.js antes do </body>, os navegadores carregarão primeiro o conteúdo do corpo, depois o código vue.js, ele funcionará.
Li Bing Zhao
1
Deparou-se com esse problema ao usar o Laravel e o laravel-mix que o acompanha. Mover o carregamento dos js para depois que o corpo o resolver.
john
24

O mais simples é colocar o script abaixo do documento, pouco antes da sua </body>tag de fechamento :

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

arquivo app.js: 

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

Você pode resolvê-lo de duas maneiras.

  1. Coloque a CDN no final da página html e coloque seu próprio script depois disso. Exemplo:
    <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>

onde você precisa colocar o mesmo código javascript que você escreveu em qualquer outro arquivo JavaScript ou no arquivo html.

  1. Use a função window.onload no seu arquivo JavaScript.
Nijat Mursali
fonte
0

Às vezes, acho que erros estúpidos podem nos dar esse erro.

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

Para

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