Vue.js strangeエラー

Question

ready()メソッドで応答を受け取ったときに、typesというデータオブジェクトを設定しようとしています。

このよう

：

export default { 

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

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

しかし、私は、コンソールに次のエラーが表示されます

Cannot set property 'types' of undefined(…) 

をしかし、私はこのようにconsole.logとき：

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

はそれは空ではありません！？！？

ここで何が起こっているの？それは私を夢中にさせる。

--EDIT--

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

Answer 1

を試してみてください。

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

thisあなたは（それがVueのコンポーネントではありません）ここfunction以内に期待しているものではありません。これはトリックを行う必要があります：

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

Answer 2

問題は（JSエラーメッセージが完全には明らかになりません）this.types、ないdata.typesある

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