Как заставить Vue ждать, пока Firestore завершит загрузку коллекции?

Question

Вот и пытаюсь подключить Firestore и tui-календарь.Но я не могу заставить его работать, и я думаю, что ошибка в том, что tui-calendar извлекает данные до того, как Firestore загрузит их.Это код, который я получил до сих пор:

Эта часть должна генерировать массив, который я хочу добавить в мой календарь:

var db = firebase.firestore();

var scheduleList = new Array;
var calendar = db.collection('calendar');
var wholeCalendarCollection = calendar.get()
      .then(snapshot => {
        snapshot.forEach(doc => {

          var dateData = new Array;
          dateData = doc.data();
          var startDate = new Date(dateData.start.seconds * 1000);
          var endDate = new Date(dateData.end.seconds * 1000);

          //all the variables used to create a date in the calendar
          var startDateString = startDate.toISOString();
          var endDateString = endDate.toISOString();
          var id = doc.id+1;
          var calendarId = id-1;
          var category = dateData.category;
          var title = dateData.title;

          var newDate = {
            id: id,
            calendarId: calendarId,
            title: title,
            category: category,
            dueDateClass: '',
            start: startDateString,
            end: endDateString
          };


          console.log(newDate);
          scheduleList.push(newDate);

        })
      })
      .catch(err => {
        console.log('Error getting documents', err);
      });

И эта часть должна поместить это в календарь:

const today = new Date();
const getDate = (type, start, value, operator) => {
start = new Date(start);
type = type.charAt(0).toUpperCase() + type.slice(1);
if (operator === '+') {
  start[`set${type}`](start[`get${type}`]() + value);
} else {
  start[`set${type}`](start[`get${type}`]() - value);
}
return start;
};
export default {
name: 'App',
components: {
  'calendar': Calendar
},
data() {
  return {
//This is my try:
    scheduleList: [
      scheduleList
    ],
//The following snippet is an example:

    /* scheduleList: [
      {
        id: '1',
        calendarId: '0',
        title: 'TOAST UI Calendar Study',
        category: 'time',
        dueDateClass: '',
        start: today.toISOString(),
        end: getDate('hours', today, 3, '+').toISOString()
      }
    ], */

Также, вот моя часть инициализации Firebase и мой импорт, если это важно:

import 'tui-time-picker/dist/tui-time-picker.css';
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-calendar/dist/tui-calendar.css';
import '@firebase/app'
import '@firebase/auth'
import '@firebase/firestore'
import 'firebase-functions'
import Vue from 'vue'
import Vuex from 'vuex'
import 'firebase'
import './app.css';
import {Calendar} from '../src/index';

//firebase

var firebase = require("firebase")
Vue.use(Vuex)


// Initialize Firebase
var config = {
apiKey: "<My credentials>",
authDomain: "<My credentials>",
databaseURL: "<My credentials>",
projectId: "<My credentials>",
storageBucket: "<My credentials>",
messagingSenderId: "<My credentials>",
};
firebase.initializeApp(config);

const admin = require('firebase-admin');
const functions = require('firebase-functions');

admin.initializeApp(functions.config().firebase);

Я тестировал код, который генерирует массив в обычном JS, и он работал, но я только начал использовать Vue.js и до сих пор не очень много знаю.Есть ли способ вывести на консоль?Потому что тогда я мог бы по крайней мере проверить, работает ли первая часть моего кода.

Answer 1

Есть несколько шагов:

1. Обернуть код firestore в метод и вызвать его при создании компонента
2. Используйте флаг isLoaded, чтобы проверить, загружены данные или нет. Вы можете использовать этот флаг для отображения состояния загрузки или скрытия компонента, когда данные недоступны.

Не забудьте изменить флаг isLoaded на true при загрузке данных

  this.scheduleList = scheduleList
  this.isLoaded = true

Исходный код компонента:

<template>
  <div v-if="isLoaded">

  </div>
</template>

<script>
export default {
  name: "",
  data: () => ({
    scheduleList: [],
    isLoaded: false
  }),
  created() {
    this.getData()
  },
  methods: {
    getData() {
      var db = firebase.firestore();
      var scheduleList = new Array;
      var calendar = db.collection('calendar');
      var wholeCalendarCollection = calendar.get()
            .then(snapshot => {
              snapshot.forEach(doc => {

                var dateData = new Array;
                dateData = doc.data();
                var startDate = new Date(dateData.start.seconds * 1000);
                var endDate = new Date(dateData.end.seconds * 1000);

                //all the variables used to create a date in the calendar
                var startDateString = startDate.toISOString();
                var endDateString = endDate.toISOString();
                var id = doc.id+1;
                var calendarId = id-1;
                var category = dateData.category;
                var title = dateData.title;

                var newDate = {
                  id: id,
                  calendarId: calendarId,
                  title: title,
                  category: category,
                  dueDateClass: '',
                  start: startDateString,
                  end: endDateString
                };


                console.log(newDate);
                scheduleList.push(newDate);

              })
              this.scheduleList = scheduleList
              this.isLoaded = true
            })
            .catch(err => {
              console.log('Error getting documents', err);
            });
    }
  }
}
</script>