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

Program / 글쓴이

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

내가 뭘 잘못하고 있죠?

답변

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

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

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

다른 구문

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

답변

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

답변

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

답변

간단한 것은 닫는 </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'
    }
});

답변

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

  1. 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 파일에 작성한 것과 동일한 자바 스크립트 코드를 넣어야합니다.

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

답변

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

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

답변