Блог

Я пытаюсь разработать календарь, который будет содержать задачи. Я пытаюсь использовать firebase, но он продолжает выдавать ошибку, в которой говорится, что он не понимает свойство » коллекция ()». Я уже исследовал много вещей, пытался сделать это другими способами, но ничего не получил. Я могу зарегистрироваться, если поступлю иначе, но считывать данные с помощью «коллекции» — нет. Подробно я использую версию 9 firebase

 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'collection')
 

Я не знаю, что еще делать, может кто-нибудь мне помочь, пожалуйста? Весь сценарий приведен ниже.

Скрипт

 export default {
  data: () => ({
    today: new Date().toISOString().substr(0, 10),
    focus: new Date().toISOString().substr(0, 10),
    type: 'month',
    typeToLabel: {
      month: 'Month',
      week: 'Week',
      day: 'Day',
      '4day': '4 Days',
    },
    name: null,
    details: null,
    start: null,
    end: null,
    color: '#1976D2', // default event color
    currentlyEditing: null,
    selectedEvent: {},
    selectedElement: null,
    selectedOpen: false,
    events: [],
    dialog: false
  }),
  mounted () {
    this.getEvents()
  },
  computed: {
    title () {
      const { start, end } = this
      if (!start || !end) {
        return ''
      }
      const startMonth = this.monthFormatter(start)
      const endMonth = this.monthFormatter(end)
      const suffixMonth = startMonth === endMonth ? '' : endMonth
      const startYear = start.year
      const endYear = end.year
      const suffixYear = startYear === endYear ? '' : endYear
      const startDay = start.day   this.nth(start.day)
      const endDay = end.day   this.nth(end.day)
      switch (this.type) {
        case 'month':
        return `${startMonth} ${startYear}`
        case 'week':
        case '4day':
        return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`
        case 'day':
        return `${startMonth} ${startDay} ${startYear}`
      }
      return ''
    },
    monthFormatter () {
      return this.$refs.calendar.getFormatter({
        timeZone: 'UTC', month: 'long',
      })
    }
  },
  methods: {
    async getEvents () {
      let snapshot = await dbStore.collection('calEvent').get()
      const events = []
      snapshot.forEach(doc => {
        let appData = doc.data()
        appData.id = doc.id
        events.push(appData)
      })
      this.events = events
    },
    setDialogDate( { date }) {
      this.dialogDate = true
      this.focus = date
    },
    viewDay ({ date }) {
      this.focus = date
      this.type = 'day'
    },
    getEventColor (event) {
      return event.color
    },
    setToday () {
      this.focus = this.today
    },
    prev () {
      this.$refs.calendar.prev()
    },
    next () {
      this.$refs.calendar.next()
    },
    async addEvent () {
      if (this.name amp;amp; this.start amp;amp; this.end) {
        await dbStore.collection('calEvent').add({
          name: this.name,
          details: this.details,
          start: this.start,
          end: this.end,
          color: this.color
        })
        this.getEvents()
        this.name = '',
        this.details = '',
        this.start = '',
        this.end = '',
        this.color = ''
      } else {
        alert('You must enter event name, start, and end time')
      }
    },
    editEvent (ev) {
      this.currentlyEditing = ev.id
    },
    async updateEvent (ev) {
      await dbStore.collection('calEvent').doc(this.currentlyEditing).update({
        details: ev.details
      })
      this.selectedOpen = false
      this.currentlyEditing = null
      this.getEvents()
    },
    async deleteEvent (ev) {
      await dbStore.collection('calEvent').doc(ev).delete()
      this.selectedOpen = false
      this.getEvents()
    },
    showEvent ({ nativeEvent, event }) {
      const open = () => {
        this.selectedEvent = event
        this.selectedElement = nativeEvent.target
        setTimeout(() => this.selectedOpen = true, 10)
      }
      if (this.selectedOpen) {
        this.selectedOpen = false
        setTimeout(open, 10)
      } else {
        open()
      }
      nativeEvent.stopPropagation()
    },
    updateRange ({ start, end }) {
      this.start = start
      this.end = end
    },
    nth (d) {
      return d > 3 amp;amp; d < 21
      ? 'th'
      : ['th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th'][d % 10]
    }
  }
}
 

Главная

 import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

// Firebase
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

//I have initialized my project with valid values but commented the keys to avoid publishing them online.
firebase.initializeApp({
  apiKey: "<my_api_key>", 
  authDomain: "<my_project_domain>",
  projectId: "<my_project_id>",
  databaseURL: "",
  storageBucket: "<my_project_storage_bucket>",
  messagingSenderId: "<my_messaging_sender_id>",
  appId: "<my_app_id>",
  measurementId: "<my_measurement_id>"
});

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')


export const dbStore = firebase.firestore();

 

1. Проверьте, импортируете ли вы DbStore
2. Воспользуйся

    this.dbStore.collection('calEvent').get().then((res)=>{ 
   
       const events = res.docs;
   
   }) 
    

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

Я бы сначала попробовал с фиктивными данными, например, вернуть json и проверить, получает ли его приложение или если сетевой запрос получает ответ, если ответов 200, затем проверьте, как поступает в приложение с помощью

 <pre>{{ yourObject }}</pre>
 

Если он не пустой, попробуйте использовать реальные данные. Если он также не пуст, ваши данные правильно привязаны.

Вы также можете жестко закодировать некоторые данные в своем сценарии, чтобы узнать, не исходит ли проблема из внешнего интерфейса, например, так:

 data: () => ({
    today: 14/02/2021
    focus: 14/01/2021
    type: 'month',
  }),
 

Также вы можете попробовать использовать Vuefire для привязки ваших данных, это поможет вам лучше интегрировать Firebase в VueJS. Вы можете следовать этому действительно полезному руководству о том, как привязать ваши данные из firestore с помощью Vuefire.
Для начала просто включите библиотеки Vue, Firebase и VueFire на своей странице:

 <head>
  <!-- Vue -->
  <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <!-- Firebase -->
  <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
  <!-- VueFire -->
  <script src="https://cdn.jsdelivr.net/vuefire/1.0.0/vuefire.min.js"></script>
</head>
 

VueFire автоматически обнаружит присутствие Vue и установится сам. Если вы используете пакет модулей, вы также можете установить зависимости с помощью NPM:

 npm install vue firebase vuefire --save

var Vue = require("vue");
var VueFire = require("vuefire");
var Firebase = require("firebase");

// explicit installation is required in a module environment
Vue.use(VueFire);