Vue.js strange error

Question

I'm trying to set a data object called types when I receive a response in the ready() method.

Like this:

export default {

  data () {
    return {
      types: null
    }
  }, 

  ready () {
   TypeService.showAll(1)
      .then(function(data) {
          this.types = data.types
      });
  }
}

But I receive the following error in the console:

 Cannot set property 'types' of undefined(…)

But when I console.log like this:

 ready () {
   TypeService.showAll(1)
      .then(function(data) {
          console.log(data);
      });
  }

It's not empty!?!?

What is going on here? It drives me crazy.

--EDIT--

TypeService.showAll(1)  
         .then(({ data }) => ({
            this.types: data.types
          }.bind(this)));

ceejayoz · Accepted Answer · 2016-08-26 14:01:03Z

3

The issue is this.types, not data.types (which the JS error message doesn't make entirely clear).

  ready () {
   TypeService.showAll(1)
      .then(function(data) {
          this.types = data.types
      });
  }

this is not what you're expecting within the function here (it's not the Vue component). This should do the trick:

  ready () {
   TypeService.showAll(1)
      .then(function(data) {
          this.types = data.types
      }.bind(this));
  }

edited Aug 26, 2016 at 14:01

answered Aug 26, 2016 at 13:44

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

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

1 Comment

ceejayoz Over a year ago

@Jamie I'm not certain. The new ES6 syntax isn't something I've fully adopted yet.

gurghet · Accepted Answer · 2016-08-26 13:43:55Z

2

Try

ready () {
var _this = this
TypeService.showAll(1)
  .then(function(data) {
      _this.types = data.types
  });
}

answered Aug 26, 2016 at 13:43

gurghet

7,6865 gold badges40 silver badges66 bronze badges

Collectives™ on Stack Overflow

Vue.js strange error

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related