thisを使って、methodsからdataにアクセスする

下記の例文にthisを使ってみる

以下が例文。sayHi関数の結果を出力しているだけ。

<div id="app">
  <p>{{ SayHi() }}</p>
</div>

new Vue({ 
  el: "app",
  data: {
    message: "Hello world!",
  },
  methods: {
    sayHi: function() {
      return 'Hi' ;
    }
  }
})

出力結果

Hi

さあ、thisを使おう

sayHi関数からインスタンス内のデータ(ここではmessageプロパティ)にアクセスしたい時はthisを使う。
テンプレート内でthisを使わず、インスタンス内でthisを使うことに注意する。

<div id="app">
  <!-- コチラの記述は変わらず -->
  <p>{{ SayHi() }}</p>
</div>

new Vue({ 
  el: "app",
  data: {
    message: "Hello world!",
  },
  methods: {
    sayHi: function() {
      // this.messageに変更している
      return this.message ;
    }
  }
})

出力結果

Hello world!