[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

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

— 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.

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/vue@2.6.11"></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.

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