[Vuejs]-TypeError: Cannot set property of undefined returned JSON issue using Realtime Firebase in Vue.js

1👍

Your problem comes with the use of function() { } instead of arrow function in the .forEach() method: you are losing the reference to this (i.e. it becomes non-lexical). This means that the this in your callback no longer refers to the VueJS component itself, but to the Window object instead.

Therefore, changing the callback in your .forEach() method to use the arrow function should fix the error you’re encountering:

snapshot.forEach(childSnapshot => {
    this.results = childSnapshot.val();   
});

Pro-tip: since your callback contains a single line, you can make it even more readable by not using curly brackets:

snapshot.forEach(childSnapshot => this.results = childSnapshot.val());
👤Terry

0👍

It looks like this is not your Vue instance.

Try binding this to your forEach.

snapshot.forEach(function(childSnapshot){
  this.results = childSnapshot.val();   
}.bind(this));

Leave a comment