【Vue.jsエラー】対処法：Property or method "〇〇" is not defined 〜

2023年9月7日 最終更新日時 : 2023年11月21日 1212yutaro

Vue.jsを使っていると、以下のようなエラーにたまに出くわします。

Property or method "〇〇" 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()内で〇〇を定義していない。」というパターンで起こるようです。

(Vue.js)
<script>
export default {
 
  data() {
      return {
        〇〇: "",　// エラーになっている〇〇の部分をここで定義しているか確認。
    },
}

data()メソッド内で定義していないデータ（メソッドやプロパティ）をコンポーネント内で、{{ 〇〇 }}のようにして呼び出そうとするとエラーになるってことです。

なので呼び出したいデータがある場合は、このdata()の部分で定義してあげましょ。

（例）〇〇の部分が"name"

(Vue.js)
<script>
export default {
 
  data() {
      return {
          name: "ゆたんぽ",　// {{ name }} とすることでここの内容が表示される
    },
}

これで、コンポーネント内で「name」というデータを使うことができるようになる。

<p> {{ name }} </p>　のようにすることで「ゆたんぽ」が表示される。ということです。

個人的には、Laravelと連絡させた際のタイパが多い・・・。

単純なタイプミスや、定義し忘れがほとんどじゃないかニャ？