What is the best way to assign the variable using Firebase data?

Having trouble setting a variable with data retrieved using a get() function on Firebase.

 export default {
    name: "customer-navigation",
mixins: [navigationMixin],
components:{AppSnackBar, authModule,AuthForm},

data () {
      return {
    drawer: false,

    items: [
      { title: this.$t('navigation.home'), icon: 'home', to: '/' },
      { title: this.$t('navigation.shop'), icon: 'shopping_basket', to: 
 '/shop' },
      { title: this.$t('navigation.cart'), icon: 'shopping_cart', to: 
 '/cart' },
      { title: this.$t('navigation.orders'), icon: 'view_headline', to: 
 '/orders' },
    ],
    img_url: "" ,
    nombreFire: "",
  }
},
methods: {
  getInfo(){      

 db.collection('users').doc(authModule.state.user.uid).get().then(function(doc) {        
      this.img_url = doc.data().img_url
    })     




  }
}


}

Encountering an error - Uncaught (in promise) TypeError: Cannot set property 'img_url' of undefined. This is the error message being displayed.

javascriptfirebasevue.jsgoogle-cloud-firestorevuex

Answer №1

The error message you're seeing indicates that it's unable to set the property img_url of an object that is currently undefined. Upon examining your code, it appears that you are trying to assign the property img_url to the object this.

In this scenario, this remains undefined due to the fact that you are within a callback function. To address this issue, you can make modifications to your getInfo method as shown below:


getInfo() {
  const vm = this; //refers to the vue module.
  db.collection('users').doc(authModule.state.user.uid).get().then(doc => {
  vm.img_url = doc.data().img_url; //assign the value to 'this'
});

For further understanding on scoping 'this' in callbacks, refer to this question.

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

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

Enhancing user experience with Ajax login forms that seamlessly integrate with browser password remember functionality

I recently implemented an ajax-based login form on my website, but it seems that browsers are not recognizing it as a login form and therefore not offering to remember passwords for easier login access. Once the submit button is clicked, the entered value ...

javascriptajaxauthenticationpasswords

How can I determine if a specific button has been clicked in a child window from a different domain?

Is there a method to detect when a specific button is clicked in a cross-domain child window that cannot be modified? Or determine if a POST request is sent to a particular URL from the child window? Below is an example of the HTML code for the button tha ...

javascriptjqueryajaxcross-domainparent-child

Unable to establish a connection with the endpoint

I'm encountering an issue while trying to connect to the endpoint on the server. Below is the code snippet: Register.jsx function Register() { const [registerUser, setRegisterUser] = useState({ username: "", email: "", password: "", ...

javascriptreactjsnode.jsexpress

Managing the onChange event for a MaterialUI dropdown component

I'm encountering an issue with validating the MaterialUI TextField component (Country list) wrapped with Autocomplete. I am trying to use the onChange event to enable the Submit button when the country field is filled in. However, the problem arises w ...

javascriptreactjstypescriptmaterial-ui

Show the cell data when the checkbox next to it is selected

I have a specific table setup and I am trying to display the content of the table cell if its corresponding checkbox is checked upon clicking a button. For example: If Row2 is checked, an alert box should display Row2 Below is my code snippet, Java ...

javascriptjqueryhtmlcss

Unable to generate a file on Firebase platform

I've made updates to my firestore rules, and while the simulator is working correctly, I'm encountering an insufficient permissions error when creating a new document. Below are the firebase rules in question: match /users/{usersid} { a ...

angulargoogle-cloud-firestoreangularfire2

Issue with Vue Checkbox not functioning properly upon being mounted in Edge browser

Currently, I am developing a Vue page with a checkbox that needs to read a value from a cookie upon mounting. However, I have observed that in the Edge browser, the checkbox does not get set correctly even though the Mounted function is definitely being ca ...

javascriptvue.jsmicrosoft-edge

Exploring the functionality of setAttribute method in JavaScript

Snippet: activeCell.onclick = function() { console.log(element); element.value = this.value; console.log(element.value); console.log(element); }; Imagine activeCell as a span with value = "678", while element is represented by a simple in ...

javascripthtmlinput

looping through a linked data object with ng-repeat

I am working with a Node object in my Angular controller. Each Node contains a next property which points to the next item: $scope.Stack = function () { this.top = null; this.rear = null; this.size = 0; this.max_size = 15; ...

javascriptangularjs

Sort through the API's array

Currently, I am working with the OpenWeather API's 5-day 3-hour forecast feature and encountering an issue regarding the response JSON. The array contains 40 items, each with a "dt_txt" value in the format of "2018-11-22 15:00:00". My goal is to displ ...

javascriptreactjs

When on a touch screen, event.relatedTarget will be null during a focusout event

When working with a textarea, I am trying to use the focusout event to capture the value of the clicked button that triggered the focusout, so I can later click it after some processing. This solution is effective on most devices, but I am encountering iss ...

javascriptjqueryfocusout

Problem encountered with a selection menu

I'm experiencing some trouble with the dropdown menu. Whenever I try to move the mouse to access the dropdown menu, it seems unresponsive. I attempted adjusting the padding on a line of code but ended up moving the entire line instead. Here is the cod ...

javascriptjquerycss

Modifying the select option dynamically once it has been activated does not produce the desired result

I'm encountering an issue with the select element. My goal is to programmatically change the selected option, ensuring compatibility with IE6. However, setting the selectedIndex with the desired value doesn't work when the control is disabled. To ...

javascriptjqueryselectinternet-explorer-6

What is the best way to display the letter X (Clear) in the Chrome INPUT field with the type

A custom application was developed that utilizes an input field of the number type: <input type="number" min="-1000000" max="1000000" step="0.01"> Within Internet Explorer, there is a small "clear" or [X] button on the right side of the input field ...

javascriptjquerycssinputtextbox

Accessing JSON data from a URL for use within a specific context

I am currently utilizing the request module within Express to fetch a JSON file from a specified link. var url = 'https://api.github.com/users/google/repos'; request.get({ url: url, json: true, headers: {'User-Agent': &apo ...

javascriptnode.jsexpress

Issue with Blueimp jquery-file-upload incorrectly displaying file size for jpeg/jpg files over 2MB

While using the blueimg file uploader library available at this link: When I upload a jpeg/jpg image larger than 2MB, it displays the wrong file size. The uploaded file also ends up with the incorrect file size. Could this be a bug in the library or am I ...

javascriptjqueryjquery-file-upload

How can we ensure that createUserWithEmailAndPassword waits for Firestore to be set before proceeding?

I am looking to register a new user and save their data in Firestore. I currently have the following code snippet: auth().createUserWithEmailAndPassword.then(() => { firebase.firestore().collection('users').doc(firebase.auth().currentUser.ui ...

reactjsreact-nativegoogle-cloud-firestorefirebase-authentication

Is it possible to invoke Bootstrap modal functions without using jQuery?

I'm in the process of removing jQuery dependencies from my app, but I still rely on Bootstrap. Is there a way to trigger modal functions like $('#myModal').modal('show') without using jQuery now? ...

javascriptjquerybootstrap-4

Bootstrap's Well Size Has Been Set into Place

Is there a way to keep the size of a text display container fixed while still making it responsive when cycling through different lengths of text with a button click? <div class ="col-md-6"> <p id="quote">Delighted with m ...

javascriptloopsgrid-layout