Как сделать экран загрузки Vuefire Show?

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

Answer 2

В readyCallbackподход в другом ответе не сработал для меня. У меня ошибкаdocument.onSnapshot is not a function.

Вместо этого я использовал подход привязки, чтобы установить флаг, когда загрузка завершена.

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