【Vuejs】watchでthisが使えない。。。

先日vuejsを使っていてはまったことがあったので書き残します。

どんな問題？

例えば、下記のようなコード。

export default {
  data() {
    return {
      moji: "moji",
      idx: 0,
    }
  }
  watch: {
    moji: () => {
      this.idx++;
    }
  }
}

このコードを実行すると、watchで観測してるmojiに紐づいている関数内のthisがいない(not found)と怒られます。

対処法

対処法はいたって簡単で、アロー関数をやめることです。次のようにすると無事this.idxを認識してくれます。

export default {
  data() {
    return {
      moji: "moji",
      idx: 0,
    }
  }
  watch: {
    moji() {
      this.idx++;
    }
  }
}

おわりに

vuejsではアロー関数を導入すると予想外の挙動をする場合があります。関数周りでエラーが出たときには疑ってみましょう。