すべてのコンポーネントが作成されるまで待っているリストのレンダリング - それらを1つずつ表示したい

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開始されますが、2日のフィルタに基づいてロードされます：「）POSSと同じくらい私の例をダウン易しく書き直さまし。要するに、それはplanner-dayコンポーネントの作成イベント内loop - this.plannerDates.push(someMoment)

のようなものだ、私は比較的プロセスにしながら、少し時間がかかる方法のカップルを呼び出す：

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

私はおよそに登場するコンソールログを参照してくださいそれぞれの間に2分の1のギャップがありますので、私のコンポーネントも同様に2分の1のギャップでページに表示されることを期待しています。

注：私は、私が見mounted()にコンソールログを追加する場合、すべての最初に作成その後、私はこれが問題になる期待が、私はVueのは、順番に各部品を実装する方法を得ることができますので、取り付けられましたか？

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')) 
    }) 
},