As I work on my Vue.js application, I encounter an issue with fetching data from Firebase when the component mounts. While I am able to successfully retrieve the data, I am struggling to write it into a Vue.js data property. I have tried using this.property = snapshot.val(); within the firebase function, as shown in the code below, but I keep getting an error stating this is undefined.
Here is a snippet of my code:
export default {
data() {
return {
imageList: "No images!"
}
},
mounted() {
if (!firebase.apps.length) {
// Initialize Firebase
var config = {
...
};
firebase.initializeApp(config);
var database = firebase.database();
var ref = database.ref("images").orderByChild("date");
firebase.database().ref("images/").once('value').then(function(snapshot) {
this.imageList= snapshot.val();
});
}
}
}
By attempting to call this.imageList= snapshot.val(); outside of the function using a variable and storing the value, I was able to avoid the 'this is undefined' error. However, the data was not available since the request had not yet completed.
My ultimate goal is to populate this.imageList with the data retrieved from snapshot.val();
Any insights or solutions would be greatly appreciated.