모든 구성 요소가 작성 될 때까지 대기하는 목록 렌더링 - 하나씩 표시하려는 경우

Question

플래너에 필요한 데이터를로드하는 데 약간의 시간이 걸리는 구성 요소가 있습니다. 은을 사용하여 차례로로드 할 것이고로드 된대로 매일 플래너에 표시됩니다. 하지만 이제는 흰색 화면이 모두 구성 요소가로드 될 때까지 보입니다. 나는 이것이 내 vue 버전의 업그레이드 이후 였을 것이라고 생각한다. (나는 많은 UI 프레임 워크로 이동 했으므로 확신 할 수 없다.)

이것은 컴포넌트 렌더링이다. [] 등의

<div 
    v-for="(date, index) in plannerDates" 
> 
    <planner-day 
    :date="date.date" 
    class="day-container col-xs-12 col-sm-4 col-md-3 col-xl-2-mod" 
    :key="index" 
    /> 
</div> 

plannerDates 시작하지만,이 날짜 필터를 기반으로로드됩니다만큼 포스 등) 내 예를 무식하게했습니다 '.

created() { 
    this.loadDay(this.date) 
    this.dataLoaded = true 
    console.log('Day loaded: %s', this.date.format('DD/MM/YYYY')) 
}, 

내가 콘솔 로그는 약으로 나타나는 참조 : 즉, 그것은 planner-day 구성 요소에서 생성 된 이벤트 내에서 loop - this.plannerDates.push(someMoment)

같은 것이, 난 상대적 과정 동안 조금 걸릴 방법 중 몇 가지를 호출 각각의 두 번째 갭의 1/4이기 때문에 두 번째 갭의 1/4이있는 페이지에도 내 구성 요소가 표시 될 것으로 기대하고 있습니다. 그러나 볼 수있는 것은 모두 하나의 것으로 나타납니다.

참고 : 나는 내가 보는 mounted()에 콘솔 로그를 추가하는 경우 생성 된 모든 첫째 다음의 I이이 문제가 예상하지만 뷰가 차례로 각 구성 요소를 장착하는 방법을 얻을 수 있도록 장착?

Answer 1

내 응용 프로그램과 관련이없는 변경을하는 동안 약속에서 내 loadDay() 메서드를 래핑하고 이로 인해 구성 요소가 차례로 렌더링됩니다. 메서드가 비동기식으로 실행되어 필요에 따라 차례대로 렌더링해야하는 것처럼 보일 것입니다 (이제는 생각할 것입니다). 그걸 염두에두고

,이 문제를 해결 생성 방법 설정 :

created() { 
    Promise.resolve().then(() => { 
    this.loadDay(this.date) 
    this.dataLoaded = true 
    console.log('Day loaded: %s', this.date.format('DD/MM/YYYY')) 
    }) 
},