Storing information retrieved from firestore for safekeeping

I am having trouble figuring out how to save data from Firestore. I attempted saving it using this.favLists so that I wouldn't have to send requests each time I make a request.

export default defineComponent({
 data() {
  return{
   favLists: '',
  }
 },
 methods: {
  async getFavorite() {
  var docRef = 
   db.collection("userFavorites").doc(this.currentUser.uid);
   docRef.get().then(function(doc) {
      if (doc.exists) {
        this.favLists = doc.data()
        console.log(doc.data())
        console.log(this.favLists)
      } else {
        console.log("No such document!");
      }
  }).catch(function(error) {
    console.log("Error getting document:", error);
  });
},

Answer №1

There seems to be a problem with the scope. Consider using arrow functions instead of callback functions for better readability:

export default defineComponent({
 data() {
  return{
   favLists: '',
  }
 },
 methods: {
  async getFavorite() {
  var docRef = 
   db.collection("userFavorites").doc(this.currentUser.uid);
   docRef.get().then((doc) => {
      if (doc.exists) {
        this.favLists = doc.data()
        console.log(doc.data())
        console.log(this.favLists)
      } else {
        console.log("No such document!");
      }
  }).catch((error) => {
    console.log("Error getting document:", error);
  });
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing jQuery to reset a toggle feature

I have created a custom clickToggle function, but I am facing an issue with it. The function currently toggles between opening and closing a div based on the clicks. The problem arises when the div is closed by clicking outside of it without activating th ...

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

I'm trying to figure out how to create a fixed toolbar that fills the remaining width of the page when a side nav is collapsible. Setting the width to 100% causes it to overflow the page due to the dynamic nature of the side nav. Using calc() isn&apos ...

Is your server failing to respond to requests once there are too many within a session?

A web application I developed uses frequent $.ajax() calls to send and receive data between a virtual machine host and client. However, I have encountered a recurring issue where the connection cuts out after a certain number of consecutive calls within a ...

Ways to navigate to a different page in React when a user clicks?

When working on my react app, I encountered an issue where the useHistory hook was undefined. How can I troubleshoot this problem and ensure that useHistory is properly defined? App.js import 'bootstrap/dist/css/bootstrap.css' import React f ...

Attempting to include a new choice on a drop-down menu and ensure its visibility within the drop-down menu

On my journey into the world of web development, I am facing a challenge with adding an option to a dropdown list. Despite pressing the add button to insert "Pasta" as a new option, it is not showing up in the list immediately. However, selecting all optio ...

I am having trouble with updating an array in React useState. Every time I try to make changes, it keeps reverting back to the initial state. What could

My current task involves managing a state array called monthlyIncidents, which contains 12 numbers that need to be updated under certain conditions. I attempted to update the elements by copying the array, modifying the specific element, and then updating ...

Guide on verifying jQuery selector using jasmine

We are currently tasked with testing a function that determines the top position of an element. Specifically, we need to evaluate the top position of an element with the ID 'test'. function findTopPosition(){ var targetElement = $('#tes ...

What are the steps to resolve the npm error message "npm ERR! code ELIFECYCLE"?

Whenever I attempt to launch npm run serve for my vue live server, an error occurs. Can anyone explain why this is happening? error code ELIFECYCLE error errno 1 error <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a3bea7ab ...

Error encountered while using XLSX.write in angular.js: n.t.match function is not recognized

I've encountered an issue while trying to generate an .xlsx file using the XLSX library. The error message I received is as follows: TypeError: n.t.match is not a function at Ps (xlsx.full.min.js:14) at Jd (xlsx.full.min.js:18) at Sv (xlsx.full.min ...

Modifying the row background in a DataTables drawCallback

Is there a way to dynamically change the background color of a row based on a specific value in a cell using drawCallback? $(table_id).DataTable({ //... "drawCallback": function (settings) { // Here, if the type of data in a particular ce ...

What could be the reason behind the error message "Java heap space exception in Eclipse" appearing while trying to use JavaScript autocomplete?

Whenever I attempt to utilize a JavaScript template on Eclipse, the program always freezes, displaying an error message stating: "Unhandled event loop exception Java heap space." To troubleshoot this issue, I initiated a top command in Ubuntu for both the ...

AngularJS $http.delete encountered an error with the message "An error occurred while trying to assign a value to a read-only property 'method'."

Hello, I am diving into the world of JavaScript and AngularJS. Currently, I am working on building a simple CRUD application. Below is the code snippet from my controller: (function() { var app = angular.module('form.user', []); app.dir ...

Expansive image coverage

My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...

"Integrating auto-expandable rows and subrows into a React table with the use

Presented here is my code for a React table using hooks. I encountered a challenge when trying to set all rows and subrows to be expanded by default upon opening the page. Despite attempting various solutions, none of them proved successful. Check out the ...

Executing the serverless invoke local command produces no output

Attempting to locally run a node lambda for debugging purposes. Utilizing Serverless and the provided launch configuration in vsCode. { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launc ...

Content obscuring dropdown menu

I am currently working on a screen design that resembles the following: return ( <SafeAreaView> <View style={styles.container}> <View style={styles.topContainer}> <View style={styles.searchFieldContainer}> ...

pm2 doesn't play well with node dotenv

In my current project, I'm faced with an interesting issue. When running the application locally without pm2, all the environment variables in the .env file are properly recognized using dotenv. However, when deploying the app on a server and using p ...

Can I use my local network/browser to download an html file from a webpage as if I manually downloaded it using javascript or nodejs?

As someone who is relatively new to javascript/nodejs and its packages, I have a question about downloading files. Is it feasible for me to download a file using my own local browser or network? Typically, when researching how to scrape or download html ...

Using the excel.js module in conjunction with node.js to create distinct columns within a header row

I am facing an issue with Excel.js while trying to add a header row to a CSV file. It seems that all the columns in the row are getting merged into one cell instead of staying separate. Does anyone know how to properly separate the columns? https://i.sst ...

The required property 'intersect' is not found in the type 'import("cesium").BoundingSphere'

Incorporating Cesium into a ReactJs application has been my recent project. I have successfully displayed various factories in the cesium viewer and drawn polygon grids on their coordinates. However, I am encountering confusion with one particular aspect. ...