Vue.js에서 AJAX 호출을 포함하여 전체보기가 렌더링되었음을 어떻게 알 수 있습니까?

Vue.js API documentation에 따르면 안에 mounted()을 사용하면 전체보기가 렌더링되었음을 보증하지만이 경우 "렌더링 됨"이 의미하는 것이 확실하지 않습니다.Vue.js에서 AJAX 호출을 포함하여 전체보기가 렌더링되었음을 어떻게 알 수 있습니까?

내가 좋아하는 nextTick의 내부 introJs().start()을 넣어 사용하는 경우 나는 intro.js 라이브러리 소개 Vue.js을 통합하려고 노력하지만,하고 다음과 같이 DOM은 아직 완전히 준비되지 및 introJs 실패처럼

mounted: function() { 
    this.$nextTick(function() { 
    // Code that supposedly will run only after the 
    // entire view has been rendered 
     introJs().start() 
    }) 
}

것 같습니다 모든 소개 단계를 성공적으로 보여줍니다.

Reproduction link

어떻게 모든 것이 정말 준비가되어 있음을 알 수 있습니까? Vue.js에서 introJs를 시작하는 다른 방법이 있습니까?

출처

2017-10-19 tatsuhirosatou

나는 문서가 잘못되었다는 것을 의심합니다. 다른 일이 계속되어야합니다. 문제를 시연하는 jsfiddle을 만들 수 있다면 기꺼이 도와 드리겠습니다. –

@EricGuan 재생산 관련 링크를 만들고 있습니다. 감사합니다 – tatsuhirosatou

@EricGuan 재생 링크 준비! – tatsuhirosatou

문제는 v-if입니다. 조건이 false이면 html 요소는 문서에 없으므로 introj가 찾을 수 없습니다. 브라우저 개발 도구에서 v-if 조건이 false 일 때 구성 요소를 보면 html 주석 이 표시됩니다.

쉬운 수정은 v-show을 사용하는 것입니다. 이렇게하면 v-show이 display css 속성을 토글하기 때문에 요소가 문서에 있고 introjs가 찾을 수 있으며 사용자는 여전히이 항목을 볼 수 없습니다.

출처

2017-10-19 05:57:01

AJAX로드에 의해 도입 된 지연 때문에 동일한 문제가 여전히 발생합니다. 지연을 추가하여 시뮬레이션했습니다. 아약스로드가 준비되기 전에 둘러보기에서 충분히 빨리 클릭하면 인트로가 잘못된 위치에 나타납니다. – tatsuhirosatou

이제'mounted '는 더 이상 적합하지 않습니다. Ajax 상태를 추적하는 항목 당 변수가 필요합니다. https://jsfiddle.net/eejn7p27/1/. 모든 아약스가 완료되면 소개가 시작됩니다. –

Vue.js에서 AJAX 호출을 포함하여 전체보기가 렌더링되었음을 어떻게 알 수 있습니까?

답변

관련 문제