Binding Vue data with Firestore

Question

Binding Vue data with Firestore

I am looking to extract information from a firestore database and link it to the vue data.

To retrieve data from firestore, I use the following method within the created lifecycle hook:

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

The problem arises when this does not point to the vue instance; in fact, it is undefined at the moment I try to assign the user variable. How can I connect the user data to the vue data? It seems like I am overlooking something, but I cannot identify what might be causing the issue.

The end goal is to create a form that allows users to edit their own data.

(the expected results are obtained when printing out the doc.data())

javascript firebase vue.js google-cloud-firestore

Answer 1

Answer №1

When the then callback is a separate function, accessing this inside that function refers to the then callback itself. To avoid this issue, it is recommended to establish a reference to the Vue instance before entering the then callback.

Consider the following approach:

created(){
  
  console.log(firebase.auth().currentUser);
  const docRef = firebase.firestore().collection("users").doc("VezLOaumLCza8jih8Ylk");
  var vm = this; // Creating a reference to the Vue instance.
  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}`);
    });
}

Answer 2

When the then callback is a separate function, accessing this inside that function refers to the then callback itself. To avoid this issue, it is recommended to establish a reference to the Vue instance before entering the then callback.

Consider the following approach:

created(){
  
  console.log(firebase.auth().currentUser);
  const docRef = firebase.firestore().collection("users").doc("VezLOaumLCza8jih8Ylk");
  var vm = this; // Creating a reference to the Vue instance.
  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}`);
    });
}

Binding Vue data with Firestore

Answer №1

Similar questions

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

Guide to shutting down a print dialogue in a web browser with javascript

What is the best way to use the copy files npm module to recursively copy all images from a source folder to a destination folder?

Utilize SWR to retrieve data that corresponds to the chosen value from the dropdown menu

Issue with Custom Directive: Receiving Token Error for Expression in Isolated Scope in Angular

How can I implement sending FCM Push Notifications at a 3-hour interval using Node.js?

Express server unable to connect to schema table causing error

Failure of AJAX Callback Triggering

Loading items into multiple containers using PHP AJAX pagination

What is preventing me from filling my array with the URL inputted by the user?

javascript variable pointing to an unknown object

How can I make my webpage unselectable except for specific content within a div using CSS and JavaScript?

Unsure about the approach to handle this PHP/JSON object in Javascript/jQuery

Is there a way for me to send a form containing pre-existing data from a different page?

Generating a constantly evolving 3D model and keeping it current within a web browser

"Bootstrap's modal-backdrop element presents a striking fade effect as it

Duplicate object omitting certain fields

Are you utilizing content loaded through jquery load in your work?

Modify the component's background color when hovering

The Controller of Conversations