Vueのmethodsでdataオブジェクトを呼ぶときの注意点

Vue (Nuxt.js) インスタンス上で定義したメソッド内で data オブジェクトを呼び出したいとき,よくある記法を使うとうまく動きません.

メソッドの正しい?定義

export default {
  data() {
    return {
      message: 'test'
    }
  },
  methods: {
    update: function() {
      this.message = 'updated'
    },
    wrong: () => {
      this.message = 'can\'t access'
    }
  }
}

メソッドを書く際にアロー関数で書くと data オブジェクトにアクセスすることができません(盲点だった…).

JS の function とアロー関数では this の解釈の仕方が異なるので,このような現象が発生するのだと思います.

参考:アロー関数が便利な理由と使いどころ | Qiita

ドキュメントに従って,省略記法を用いずに定義すればちゃんと呼び出せます.

タイトルとURLをコピーしました