如何讓vuefire顯示加載屏幕？

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