VueJS data property returns undefined in mounted function

Question

I've made a get request using Axios which returns some data as expected, but I cannot access the app's data properties in the mounted function to assign the results of the request. The console log to this.productList returns undefined. Can anyone point me in the right direction?

new Vue({
    el: '#products',
    data: function(){
        return{
            test: 'Hello',
            productList: null
        }
    },
    mounted: function(){
        axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response){
            console.log(response.data);
            console.log(this.productList)
        }).catch(function(error){
            console.log(error);
        })
    }
    
})

Possible duplicate of How to access the correct `this` inside a callback? — t.niese
– t.niese, Commented Aug 20, 2018 at 11:25

Phiter · Accepted Answer · 2018-08-20 11:27:42Z

21

Because in that function, this doesn't refer to your vue instance. It has another meaning.

You can make a temporary variable to hold the value of this in the outer function, like this:

mounted: function() {

  let $vm = this;

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response) {
    console.log(response.data);
    console.log($vm.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

Or you can use the nicer arrow functions:

mounted: function() {

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then((response) => {
    console.log(response.data);
    console.log(this.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

answered Aug 20, 2018 at 11:27

Phiter

15k14 gold badges52 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris Wickham Over a year ago

Thanks for these answers. Why does the use of the arrow functions change what 'this' references?

Phiter Over a year ago

Check this out

Mohammad Fahad Rao Over a year ago

Your answer worked in my case as i assigned "this" to a variable but can you explain how it worked

Phiter Over a year ago

@MohammadFahadRao this is a reserved variable that depends on the scope it's accessed on. If you try to access this in a inner function, it will have a different value than the one in the outer function. By attributing this from the parent scope to a variable, you can access it in inner scopes.

Collectives™ on Stack Overflow

VueJS data property returns undefined in mounted function

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related