如何让 vuefire 显示加载屏幕?
Posted
技术标签:
【中文标题】如何让 vuefire 显示加载屏幕?【英文标题】:How can I make vuefire show loading screen? 【发布时间】:2018-01-28 16:41:07 【问题描述】:作为标题 Vuefire 可以自动从 firebase 数据库中获取数据,但它需要一些加载时间。 所以我想在获取数据之前显示一些 css 动画,当它成功时我可以观看任何事件
【问题讨论】:
如果检查数据v-show,请尝试使用vue-spinner 【参考方案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
)
【讨论】:
【参考方案2】:另一个答案中的readyCallback
方法对我不起作用。我收到一个错误document.onSnapshot is not a function
。
相反,我使用binding approach 在加载完成时设置一个标志。
<script>
// ...
export default
data()
return
data: [],
loaded: false,
,
mounted()
this.$bind('data', firebase.firestore().collection('someDocRef'))
.then(() => this.loaded = true);
,
</script>
然后我的模板可以有条件渲染的加载屏幕:
<template>
<template v-if="!loaded">
<p>Loading...</p>
</template>
<template v-if="loaded">
<!-- Display data here -->
</template>
</template>
【讨论】:
这对我有用,应该打勾作为答案。虽然,与这个答案相比,我的代码有一点变化 mount() this.$bind("data", db.collection("documents")).then( () => (this.loaded = true) );我使用了db.collections...
而不是firebase.firestore
,这是我从我的firebase 配置文件中导出的。以上是关于如何让 vuefire 显示加载屏幕?的主要内容,如果未能解决你的问题,请参考以下文章