如何让Vue等待Firestore完成下载集？

Question

所以我试着把Firestore和tui挂历连接起来。但我似乎无法让它发挥作用，我认为，错误在于，tui日历在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 init部件和导入，如果这很重要的话：

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. 将防火墙代码包装到方法中，并在组件创建时调用它。
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>