Vue Component内methodsのアロー関数式内でdataを扱う

この記事はQiitaに書いていた自身の記事のコピーです。

これを解決します。

export default {
  data: () => {
    return {
      test: 0
    }
  },
  methods: {
    testfunc: () => {
      this.test++ // エラー
    }
    /*
    testfunc2: function () {
      this.test++ // こちらはうまくいく
    }
     */
  },
  created () {
    this.testfunc() // ここではthisが使えている
  }
}

うまくいかない原因

• アロー演算子() => {}内のthisはこのvmを参照していないため

対処法

var vm // --①
export default {
  data: () => {
    return {
      test: 0
    }
  },
  methods: {
    testfunc: () => {
      vm.test++ // 👏
    }
  },
  created () {
    vm = this // --②
    this.testfunc()
  }
}

ポイント

1. vm用の変数を確保
2. vm内にcreatedかmountedを使ってvmを代入

もやもや

• 出来ればvarを使わずに書きたい
• 外に仮置きしないで実装する方法は無いんだろうか…

もっときれいに書く方法が有れば、教えていただけるとありがたいです。