Calling 'this' inside of firebase once function

Question

So I am creating a Vuejs application and I am trying to fetch firebase data on component mount. That is working, but I try to write the value into a vuejs data property. For this I would only call this.property = snapshot.val(); inside the firebase function (see code below) but that is not working: this is undefined

So my code just is:

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

I tried calling this.imageList= snapshot.val(); outside of the function with a variable to store the value, and 'this' wasn't undefined anymore, but the data wasn't there because the request hasn't finished yet.

So basically I want to get the snapshot.val(); into this.imageList!

Thanks in advance.

score 10 · Accepted Answer · edited Jul 20 '17 at 20:04

10

You can use es6 arrow function syntax to solve the issue.

firebase.database().ref("images/").once('value').then((snapshot) => {
    this.imageList= snapshot.val();
});

or bind this to the context of the function.

var that = this;

edited Jul 20 '17 at 20:04

Devid Farinelli

7,514
9
42
73

answered Jul 20 '17 at 20:03

Etherealm

2,234
3
18
34

I'll try that out! Thank you! – Janis Jansen Jul 21 '17 at 04:26

Bert · Answer 2 · 2017-09-22T15:23:10.580

3

Use an arrow function, a closure, or bind.

firebase.database().ref("images/").once('value').then(snapshot => {
  this.imageList= snapshot.val();
});

See How to access the correct this inside a callback.

edited Sep 22 '17 at 15:23

answered Jul 20 '17 at 20:02

Bert

80,741
17
199
164

Ikbel · Answer 3 · 2017-07-21T00:43:20.200

0

You can use bind as well.

firebase.database().ref('images/').once('value').then(function(snapshot) {
  this.imageList = snapshot.val()
}.bind(this))

edited Jul 21 '17 at 00:43

answered Jul 21 '17 at 00:18

Ikbel

7,721
3
34
45

I tried binding this way, but it wasn't working, but maybe I missed something, thanks! – Janis Jansen Jul 21 '17 at 04:25

Calling 'this' inside of firebase once function

3 Answers3