Question

我想从Firestore检索数据并将其绑定到Vue数据。

我以以下方式在创建的生命周期挂钩中检索firestore数据：

  created(){

console.log(firebase.auth().currentUser);
const docRef = firebase.firestore().collection("users").doc("VezLOaumLCza8jih8Ylk");
docRef.get().then(
  function(doc){
    if(doc.exists){
      console.log(`Document data: ${doc.data()}`);
      this.user = doc.data();
    } else {
      console.log(`Doc data is undefined`);
    }
  }).catch(function(err){
    console.log(`Oops: ${err.message}`);
  });
}

问题在于this没有引用vue实例，实际上this在我试图设置用户变量的时候是未定义的。如何将用户数据绑定到vue数据？似乎我缺少了一些东西，无法弄清楚可能是什么问题。

最终目标是拥有一个允许用户修改其数据的表格。

（打印出doc.data（）可获得预期结果）

Answer 1

then回调是一个单独的函数，因此在该函数内部访问this时，它引用的是then回调。您需要在then回调之前创建对Vue VM的引用。

尝试一下：

created(){

console.log(firebase.auth().currentUser);
const docRef = firebase.firestore().collection("users").doc("VezLOaumLCza8jih8Ylk");
var vm = this; //creating the reference to the Vue VM.
docRef.get().then(
  function(doc){
    if(doc.exists){
      console.log(`Document data: ${doc.data()}`);
      vm.user = doc.data();
    } else {
      console.log(`Doc data is undefined`);
    }
  }).catch(function(err){
    console.log(`Oops: ${err.message}`);
  });
}

Vue和Firestore数据绑定

1 个答案: