[부 경고] : 요소를 찾을 수 없습니다

166

Vuejs 사용 하고 있습니다. 이것은 내 마크 업입니다.

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

이것은 내 코드입니다.

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

페이지를로드하면이 경고가 나타납니다.

[Vue warn]: Cannot find element: #main

내가 뭘 잘못하고 있죠?

javascript mvvm vue.js

— 도파 트라 만
소스

1

바닥 글이나 머리글 에서이 작업을 수행합니까?

— Chris Baker

6

스크립트를 창 준비 처리기로 이동

— Arun P Johny

2

준비된 처리기가 문제였습니다. @ArunPJohny-vue에 포함되어 있지 않은 것은 바보 같은 것 같습니다.

— dopatraman

317

문제는 대상 dom 요소가 dom에로드되기 전에 스크립트가 실행되는 것입니다 ... 한 가지 이유는 페이지의 헤드 또는 div 요소 앞에있는 스크립트 태그에 스크립트를 배치했기 때문일 수 있습니다 #main. 따라서 스크립트가 실행될 때 대상 요소를 찾을 수 없으므로 오류가 발생합니다.

한 가지 해결책은 다음과 같이로드 이벤트 핸들러에 스크립트를 배치하는 것입니다.

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

다른 구문

window.addEventListener('load', function () {
    //your script
})

— 아룬 피 조니
소스

4

감사 야, 미안 여기에 코멘트 왜 VUE JS로드 할 필요가 그것을 더 이야기, 감사가없는 문서에

— 프레디 Sidauruk

9

또한,이 addEventListener방법은 글로벌 window.onload속성을 무시하지 않기 때문에 "기술적으로"유지 관리하기 쉬운 접근 방법 입니다.

— joshwhatk

<head></head>섹션 에 Webpack 번들 스크립트를 포함 시키면 오류가 발생했습니다. 창이로드되기를 기다리는 중입니다.

— Amin NAIRI

1

콘솔에서 DOM 요소에 대한 참조를 포함하는 스크립트 명령문이 DOM이로드되기 전에 평가되고 있다는 경고가 없습니까? 이것이 어떻게 구현하기 어려운 경고가 될 수 있습니까?

— Tom Russell

70

'script'요소에 'defer'속성을 추가하여 문제를 해결했습니다.

— 수 추안
소스

지연 사용에 부작용이 있습니까?

— Mohammad Ali Akbari

1

스크립트 태그의 defer속성 작동 방식 에 대한 자세한 내용 은 여기를 참조하십시오 . DOM이 파싱 될 때까지, 그러나 윈도우 이벤트가 시작되기 전에는 JS 코드 실행이 지연됩니다 onload.

— JrBaconCheez

51

같은 오류가 발생합니다. 해결책은 헤드 섹션이 아닌 본문 끝 앞에 스크립트 코드를 넣는 것입니다.

— 리 빙 자오
소스

몸이 끝나기 전에 머리에 있지 않습니까? 정확히 무엇을 의미합니까?

— daslicious

6

— 리빙 자오

3

</ body> 앞에 vue.js 코드를 넣으면 브라우저가 본문 내용을 먼저로드 한 다음 vue.js 코드를로드하면 작동합니다.

— li bing zhao

1

라 라벨과 그에 포함 된 라 라벨 믹스를 사용하는 동안이 문제에 부딪 치십시오. 본문이 해결 된 후로 js로드를 이동합니다.

— john

24

간단한 것은 닫는 </body>태그 바로 앞에 스크립트를 문서 아래에 두는 것입니다 .

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

app.js 파일 :

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

— Tadas Stasiulionis
소스

0

두 가지 방법으로 해결할 수 있습니다.

CDN을 html 페이지 끝에 넣고 그 뒤에 고유 스크립트를 넣으십시오. 예:

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

다른 JavaScript 파일이나 html 파일에 작성한 것과 동일한 자바 스크립트 코드를 넣어야합니다.

JavaScript 파일에서 window.onload 함수를 사용하십시오 .

— 니 ja 무 살리
소스

0

때로는 어리석은 실수로 인해이 오류가 발생할 수 있다고 생각합니다.

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

— 니 샤그 샤
소스