반응형
[Vue 경고] : 요소를 찾을 수 없습니다
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'
}
});
참고 URL : https://stackoverflow.com/questions/29484431/vue-warn-cannot-find-element
반응형
'IT story' 카테고리의 다른 글
| URL에서 매개 변수 검색 (0) | 2020.06.23 |
|---|---|
| IIS Express 웹 서버를 시작할 수 없습니다. URL을 등록하지 못했습니다. 액세스가 거부되었습니다. (0) | 2020.06.23 |
| 숫자가 범위 내에 있는지 우아하게 확인하는 방법은 무엇입니까? (0) | 2020.06.23 |
| Python datetime-strptime을 사용하여 일, 월, 년을 얻은 후 고정 시간과 분 설정 (0) | 2020.06.22 |
| 스칼라에서 'type'키워드의 기능 이해 (0) | 2020.06.22 |