Vue/Nuxt

【Vue.js】「 TypeError: ***** is not a function」とエラーになるときの確認事項!

あきぞらです。

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

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

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

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

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

発生した事象

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

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

<template>
  (省略)
</template>

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

<style>
  (省略)
</style>

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

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

エラーの原因

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

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

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

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

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

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

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

-Vue/Nuxt

Copyright© あきぞらてっく , 2021 All Rights Reserved Powered by AFFINGER5.