[Vuejs]-Cannot read data from Firestore – Vue.js

by

0👍

@Mill @Raffobaffo, as you have said in comments, May be the response from firebase coming after the method completes. So try using async await functions.

and it’s better to set a key something other than message.message

like this,

<div @v-for="(message,name,index) in messages" :key="index" class="incoming_msg">

 methods: {
    saveMessage : async function () {
      //save to firestore
      await db.collection("chat").add({
        message: this.message,
        time: new Date()
      });
      this.message = null;
    },
    fetchMessages : async function () {
      await db.collection("chat")
        .orderBy("time")
        .onSnapshot(querySnapshot => {
          let allMessages = [];
          querySnapshot.forEach(doc => {
            allMessages.push(doc.data());
          });
          this.messages = allMessages;
        });
    }
  },
  created : async function () {
    await this.fetchMessages();
  }

Leave a comment