作成済みまたはマウント済みフックのコンポーネントデータにアクセス

Question

Vue.jsのコンポーネントを作成していますが、イベント時にデータを変更する必要があります。イベントが最初に呼び出されたときには、何らかの理由で、私はそれにアクセスすると、それは未定義

module.exports = { 
    data: function() { 
     return { 
      visible: true 
     } 
    }, 
    mounted: function() { 
     this.eventHub.$on('minimize', function(window_id) { 
      console.log(this.visible); 
      this.visible = !this.visible; 
     }); 
    }, 
    props: ["windowId"] 
} 

として設定されています、data.visibleは、何らかの理由で、未定義です。

私が間違っていることはありますか？

ありがとうございます！

Answer 1

function (window_id)には独自のスコープがありますので、thisにアクセスすることはできません。

これは、self = thisを追加することで解決できます。

let self = this 
this.eventHub.$on('minimize', function(window_id) { 
    console.log(self.visible); 
    self.visible = !self.visible; 
}); 

Nick Rucciが指摘しているように、矢印機能を使用して、self = thisを取り除くこともできます。

this.eventHub.$on('minimize', (window_id) => { 
    console.log(this.visible); 
    this.visible = !this.visible; 
});