使用Vue中的Firestore数据填充字段

Question

我正在构建一个简单的vue应用，我在其中注册/登录用户时将他们重定向到自己的“特殊”页面。我创建了一个名为profile的集合（使用firestore），在其中我已成功将所有自定义数据保存在以下结构中：

profiles =>
    ABCDEF1234 (user.uid) =>
        role =>
            customrole: true
        bio: "Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
        etc: "etc"    
        etc: "etc"    
        etc: "etc"

我的观点是，我试图将个人简介传递给我，以便他们可以编辑他们的个人简介，但是对我而言，我无法获取它来获取数据。

  <input
    type="text"
    name="bio"
    placeholder="bio"
    v-model="info.bio"
  />

我可能完全不知道该怎么做，但这就是我目前拥有的。在我的data（）中，我目前有：

    data() {
        return {
            user: null,

            info: {
                bio:null,
            }
        };
    },

然后我进入了created（）（可能不是正确的位置）

const test = firebase.auth().currentUser
  return {
   info: firebase.firestore().collection('profiles').doc(test.uid)
  }

我想我错误地认为这会将集合配置文件与当前登录的用户“关联”到信息，然后将其用在上面的数据中，以便我像{{info.bio}}那样调用。我仍然很陌生，任何有益的指导或建设性的批评将不胜感激。

Answer 1

由于您没有显示有关整个Vue.js应用程序体系结构的大量详细信息，所以我假设firebase.auth().currentUser返回当前用户（即该用户已登录）。

因此，以下应该可以解决问题：

  mounted: function() {
    const user = firebase.auth().currentUser;
    if (user) {
      firebase
        .firestore()
        .collection("profiles")
        .doc(user.uid)
        .get()
        .then(doc => {
          if (doc.exists) {
            this.info.bio = doc.data().bio;
          } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
          }
        })
        .catch(function(error) {
          console.log("Error getting document:", error);
        });
    }
  }

---

从Firestore提取文档是一种异步操作，它返回Promise。因此，您需要按照Firestore Promise中的说明使用then()方法，以便等待Promise解析后才能将then()的值分配给相应的Vue.js数据属性。 >