Vueでの.bind(this)について

Question

var app = new Vue({
	el: "#app",
  data: {
  	bpi: null
  },
  mounted: function() {
  	axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response) {
    	//console.log(response.data.bpi);
      this.bpi = response.data.bpi;
    }.bind(this))
    .catch(function(error) {
    	console.log(error);
	})
  }
})

基本的な質問になりますが、axios使用時に.bind(this)というコードがありますが、これはなぜ必要なのでしょうか？

自分でも.bind(this)の有無で試してみましたが、.bind(this)がなければdataオプションのbpiがnullのままでした。

Googleで調べてみても参照になるようなものがなかったので、質問させていただきました。回答をお待ちしております。

Answer 1

function(){}で書いた関数は、呼び出されると状況によってthisを設定しますので、mounted内部のthisとは一致しなくなります。

.bindする以外に、コールバックをarrow functionで書く、という解決策もあります。

Comments

[tojima]

.mounted内部のthisはどこを指しているのでしょうか？

[otolab]

Vueのインスタンスですね。
https://jp.vuejs.org/v2/guide/instance.html