Vue - Cannot set property of undefined in promise

Your context is changing: because you are using the keyword function, this is inside its scope the anonymous function, not the vue instance.

Use arrow function instead.

  loadData: function() {
        Vue.http.get('/notifications').then((response) => {

            console.log(response.data);
            //this.notifications = response.data;
            //this.notifications.push(response.data);

            this.message = "This is a message";

            console.log(this.message);
        });

    },

NB: You should by the way continue to use the keyword function for the top level of your methods (as shown in the example), because otherwise Vue can't bind the vue instance to this.


One can set this to a const outside the code block and use that const value to access the class properties.

ie

const self = this;

blockMethod(function(data) {
    self.prop = data.val();
})

Use arrow function in promise then you can access 'this' object.

loadData: function() {
        Vue.http.get('/notifications').then(response => {
            console.log(response.data);
            //this.message = 'Something'
        });

    }