[vue 경고]:요소를 찾을 수 없음

Programing

[vue 경고]:요소를 찾을 수 없음

c10106 2022. 3. 5. 18:01

[부유 경고]:요소를 찾을 수 없음

부에즈 쓰고 있어.이건 내 마크업이다.

<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' 카테고리의 다른 글

Vue의 계산된 속성에 매개 변수를 전달할 수 있는가? (0)	2022.03.05
Vuex - 계산된 속성 "name"이(가) 할당되었지만 세터가 없음 (0)	2022.03.05
'Unchecked runtime.lastError:응답이 수신되기 전에 메시지 포트가 닫힘' 크롬 문제? (0)	2022.03.05
구성 요소 외부에서 Vue.js 구성 요소 메서드를 호출하십시오. (0)	2022.03.05
vue-cli 프로젝트에서 포트 번호를 변경하는 방법 (0)	2022.03.05

현재글[vue 경고]:요소를 찾을 수 없음

c10106