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

【问题标题】：Cannot read data from Firestore - Vue.js无法从 Firestore 读取数据 - Vue.js
【发布时间】：2020-10-24 22:14:32
【问题描述】：

我正在尝试使用 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();
  }
};

【问题讨论】：

您在 v-for 中用作键的“消息”是否是您正在迭代的所有元素中的唯一属性？另外，key 应该是一个没有空格的字符串。
vuejs.org/v2/api/#key
@Raffobaffo 可能是这样，因为控制台说它无法读取 null 的属性“消息”。但是，我尝试了 v-for 文档，但仍然无法正常工作
这意味着迭代的属性为空（很明显:)）。我认为这可能有两个原因：这可能发生在您的 fetchMessages 完成之前，或者您从中获得的结果不是您所期望的。当他们应该被填充时，尝试 console.log this.messages。这里 --> .onSnapshot(querySnapshot => { let allMessages = []; querySnapshot.forEach(doc => { allMessages.push(doc.data()); }); this.messages = allMessages; console.log(this .messages) });

标签： javascript firebase vue.js web google-cloud-firestore

【解决方案1】：

@Mill @Raffobaffo，正如您在 cmets 中所说，可能是方法完成后来自 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();
  }

【讨论】：

谢谢你们，我终于弄明白了。是 v-for 之前的“@”造成了麻烦，是的，我绝对应该为键选择一个更好的名称