FrontEnd/Vue

[Vue] 에러 [Vue warn]: Cannot find element:

모찌바라기 2021. 3. 30. 17:47
728x90
반응형

Vue를 공부하던 중 에러 발생

HTML
JS

 

간단히 Message를 뿌려주는 테스트를 하던 중 message의 value값이 아닌 {{message}}가 떠서 콘솔로 확인해보니

[Vue warn]: Cannot find element: #app 이라는 에러가 발생 

 

수정한 JS

위와 같이 window.onload = function () 으로 감싸주니 잘 된다.

 

---------------------------------------------------------------------------------------------------------------------------------

 

추가내용

위 상황을 보면 이렇다.

1. 에러내용을 보면 id값이 app인 녀석을 찾지 못해 DOM으로 바인딩을 못해준다.

2. window.onload를 이용하면 잘 된다.그럼 시점이 문제인 것 같은데.. 라고 생각하고 그냥 얼렁뚱땅 넘어갔는데 같이

일하시는 분이 친절히 알려주셨다

vueTest.js를 <head>에서 불러오면 vueTest.js를 먼저 읽는데 그럼 랜더링이 완전히 되기전이라

id값이 app인 <div>가 아직 선언 되기 전이라 해당 element를 찾지 못하였다.

해결방법으로는

1. <body>안 가장 아래에 둬서 랜더링이 전부 끝난 후 js파일이 읽히도록 한다.

2. 해당 스크립트 소스를 $(document).ready 또는 $(window).load 함수로 감싸서 랜더링이 완료 된 후에 해당

   소스들이 실행되도록 한다.

해당 JS를 Body 가장 아래에 선언

 

 

728x90
반응형