Vue.js奇怪的错误

Question

当我在types方法中收到回复时，我尝试设置名为ready()的数据对象。

像这样：

export default {

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

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

但是我在控制台中收到以下错误：

 Cannot set property 'types' of undefined(…)

但是当我像这样控制台.log：

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

它不是空的！？！？

这里发生了什么？它让我疯狂。

- 编辑 -

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

Answer 1

问题是this.types，而不是data.types（JS错误消息并未完全清楚）。

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

this不是您在function范围内所期望的（它不是Vue组件）。这应该可以解决问题：

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

Answer 2

尝试

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