Question

我正在尝试使用Firebase作为后端创建一个简单的Vue.js应用程序。当我尝试列出渲染时，无法显示Firebase的预期属性。在所有这些方面，我仍然是一个新手，我无法使其与其他帖子一起使用。我认为我从Firebase读取的数据不正确，因此我的路由不正确。

这是我如何将数据添加到Firebase的工作原理： Firebase structure

ChatUI.vue：

<div @v-for="message in messages" :key="message.message" class="incoming_msg">
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p>{{message.message}}</p>
                  <span class="time_date">11:01 AM | June 9</span>
                </div>
              </div>
            </div>

main.js：

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

Answer 1

如您在评论中所述，

@Mill @Raffobaffo，可能是方法完成后来自Firebase的响应。因此，请尝试使用异步等待功能。

最好设置除message.message

以外的其他键

像这样

<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();
  }

无法从Firestore中读取数据-Vue.js

1 个答案: