Question

Vue 和 firestore 数据绑定

2018-12-29

779

javascript firebase vue.js google-cloud-firestore

我想从 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}`);
  });
}