【Vue.js】「 TypeError: ***** is not a function」というエラーが発生したときに確認すること！

あきぞらです。

Vue.jsで開発をしていて、何度かエラーに遭遇することがあります。

先日、発生したエラーは以下のようなものです。

TypeError: *****（定義したメソッド名） is not a function

「ちゃんとメソッド定義したはずなんだけどな…？」と思い確認すると、定義してあるように見えます。

今回はこんな状況が発生したときに、確認することを紹介したいと思います。

発生した事象

表題のエラーが発生したとき、以下のようなコードを書いていました。

（Vue.jsで書いたJavaScriptのコードを抜粋しています。）

<script>
  export default {
    created() {
      this.testFunction();
    }
    method: {
      testFunction() {
        console.log('test');
      }
    }
  }
...（省略）...
</script>

上の例では、testFunction()を定義していて、created()で呼び出そうとしています。

しかし、画面や、Chromeのコンソールには以下のようなエラーが表示されてしまいました。

エラーの原因

TypeError: this.testFunction is not a function と書いてありますね。

どうやら関数が定義されていないか、定義したのに読み込まれていないようです。

実はこれ、かなり初歩的なミスです。

関数を定義しているところをみてみます。

method: {
  testFunction() {
    console.log('test');
  }
}

正しくは、methodではなく、methodsです。

methodsに修正してあげれば、完了です。

よくある凡ミスなので、気を付けていきましょう。