website

Javascript/Typescript Tech Vuejs

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

2021年5月17日

こんな方におすすめ

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

-Javascript/Typescript, Tech, Vuejs,
-, , ,