【Nuxt】 is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

毎日ボチボチプログラミングをしながら生活しています。その中での技術・エラーなどの紹介をしています。

今回は、nuxt.jsを利用していてエラーが出ていたので紹介していきます。nuxt.jsを初めて使う方向けに書いてみます。私も最近少し使っただけなので調べながらやっている状態です。解決すると本当にしょうもないミスでした。

今回の事象
調べてみた内容
最後に

今回の事象

Nuxt.jsアプリを作成して、clickによってmethodsを起動したときです。以下のエラーが発生しました。

method名は、test()でした。

Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

1	Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

調べてみた内容

なぜ、出ているのかがわからなかったのでいろいろ調べました。出てきた情報をまとめていきます。

dataに定義できていない

method内で使っているdata()内容が設定されていないのが可能性があるとのことでした。

私の場合は、data内に定義されていたので違いました。returnに定義されていないのが理由でも同じエラーが表示されることもあるみたいです。

data() {
    return {
      data: '',
    }
  },

data() {

return {

data: '',

}

定義されたmethodがかち合っている

method名やコンポーネントの名前が２回使われていたりする時にも似たようなものが出てくるみたいです。

違うエラーが出そうですが、そんな記事も出てきました。

定義がされていない

エラーの内容としては、定義されていないと書いてあります。ですが、私は定義していると考えていたので、その線を切っていました。結論としては、method内に定義できていなかったのが原因でした。

簡単な構造では以下のようになっていました。

methods: {
  },
  test() {
    this.$axios.get('http://localhost:3000/api/HttpTrigger')
  },

methods: {

test() {

this.$axios.get('http://localhost:3000/api/HttpTrigger')

これは、簡単に表現するために作成したものですが、これがもっとmethodがたくさんあったので、構造がみづらくなっていました。簡単なことでしたが、コード量が増えてくると構造が見辛くなるので気がつくのになかなかハマりました。エラーの内容を信じて一度頭をリセットするといいかと思います。

最後に

お疲れ様です。エラーは解決できたでしょうか？

他にもエラー情報等も掲載してあるので読んでみて下さい。

解決できなければ、NuxtJS公式を確認してみるのもいいと思います。

ひと休憩の際におすすめ記事は「【Nuxt.js】ローカル環境にてcorsの設定方法」です。時間があれば読んでみて下さい。