vuefire show loading画面を作るにはどうすればいいですか？

Question

タイトルとして Vuefireはfirebaseデータベースから自動的にデータを取得できますが、読み込み時間が必要です。 データを取得する前にCSSアニメーションを表示したい場合は、成功したときに何かイベントを見ることができますか？

Answer 1

これは複数の方法で実行できます。 Vuefireは、データがフェッチされる（準備完了）ときに呼び出されるコールバックのreadyCallbackです。ここで

それは次のとおりです。

var vm = new Vue({ 
    el: '#demo', 
    data: function() { 
    return { 
     loaded: false 
    } 
    } 
    firebase: { 
    // simple syntax, bind as an array by default 
    anArray: db.ref('url/to/my/collection'), 
    // can also bind to a query 
    // anArray: db.ref('url/to/my/collection').limitToLast(25) 
    // full syntax 
    anObject: { 
     source: db.ref('url/to/my/object'), 
     // optionally bind as an object 
     asObject: true, 
     // optionally provide the cancelCallback 
     cancelCallback: function() {}, 
     // this is called once the data has been retrieved from firebase 
     readyCallback: function() { 
     this.loaded = true // NOTE THIS LINE 
     } 
    } 
    } 
})