我如何使Vue等待Firestore完成下载集合

Question

，所以我正在尝试连接firestore和tui-calendar。但是我似乎无法使它发挥作用，我认为错误是，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 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. 将Firestore代码包装到方法中，并在组件创建时调用
2. 使用标志isLoaded检查数据是否已加载。您可以使用此标志在不可用时显示加载状态或隐藏组件。

记住将isLoaded标志更改为"加载数据"

时

  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>