반응형
[부유 경고]:요소를 찾을 수 없음
부에즈 쓰고 있어.이건 내 마크업이다.
<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
내가 뭘 잘못하고 있는 거지?
문제는 돔에 목표 돔 요소가 로드되기 전에 스크립트가 실행된다는 겁니다.한 가지 이유는 페이지 머리글이나 분할 요소 앞에 배치되는 스크립트 태그에 스크립트를 배치했기 때문일 수 있다.#main. 따라서 스크립트가 실행되면 대상 요소를 찾을 수 없으므로 오류가 발생한다.
하나의 해결책은 다음과 같은 로드 이벤트 핸들러에 스크립트를 배치하는 것이다.
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
다른 구문
window.addEventListener('load', function () {
//your script
})
나는 '스크립트' 요소에 속성 '디퍼'를 추가하여 문제를 해결했다.
나도 같은 실수를 한다.해결책은 대본 코드를 머리 부분이 아닌 몸통 끝에 넣는 것이다.
간단한 것은 대본을 마감 직전에 문서 아래에 놓는 것이다.</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'
}
});
두 가지 방법으로 해결할 수 있다.
- 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 코드를 넣어야 한다.
- 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>
참조URL: https://stackoverflow.com/questions/29484431/vue-warn-cannot-find-element
반응형
'programing' 카테고리의 다른 글
| Python 3에서 문자열을 바이트로 변환하는 가장 좋은 방법? (0) | 2022.03.31 |
|---|---|
| 렌더에서 다시 호출 기능을 중지하는 방법 (0) | 2022.03.31 |
| 상태로 전달된 더 많은 데이터, 올바르게 수행되지 않음 (0) | 2022.03.31 |
| Vue.js—v-model과 v-bind의 차이 (0) | 2022.03.31 |
| 수퍼마켓은 논쟁없이 무엇을 하는가? (0) | 2022.03.31 |