Vueファイルでページの内容は正しく表示されているのに、コンソールに次のようなエラーが発生することがあります。
[Vue warn]: Property or method “xxx” 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.
そして、対象の「xxx」をファイル内で検索しても、それと一致するプロパティやメソッドはどこにも呼び出していない場合の対処法です。
エラーの症状と原因
エラーの詳細
エラーの症状としては、Vueファイルに記述した内容は正しく表示されているのに、Property or methodが見つからないというエラーが複数発生している状態です。
そして、エラーで表示された項目をファイル内で検索しても、ぴったり一致するものは見当たりません。
例えば、以下のように「c」「picture」「wrapper」が見つからないと表示される状態です。
vue.runtime.esm.js:638 [Vue warn]: Property or method “c” 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
—> at app/javascript/components/Mountain.vue
at app/javascript/app.vue
warn @ vue.runtime.esm.js:638
vue.runtime.esm.js:638 [Vue warn]: Property or method “picture” 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
—> at app/javascript/components/Mountain.vue
at app/javascript/app.vue
warn @ vue.runtime.esm.js:638
vue.runtime.esm.js:638 [Vue warn]: Property or method “wrapper” 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
—> at app/javascript/components/Mountain.vue
at app/javascript/app.vue
エラーの中身は、
レンダリング時に「c」「picture」「wrapper」というプロパティかメソッドが呼び出されているが、どこにも定義されていません。dataなどで定義されているか確認してください。
というものです。
原因
エラーの原因は、もちろん、呼び出そうとしているプロパティかメソッドがファイルの中で定義されていないことです。
エラーで表示されたものとぴったり一致するものをHTML（テンプレート）の中に記述していないのが、エラーの原因追求でとてもわかりにくいところです。
このエラーの根本的な原因は、「c」「picture」「wrapper」というプロパティをひとつひとつ定義しているわけではなく、「c-picture-wrapper」というケバブケースで繋いだ値を読み込もうとしている場合に発生します。
今回のエラーの原因となった、コードは次の一文です。
<div :class="c-picture-wrapper">本来、ただのclass属性でクラス名を指定するところが、誤って「:class」となり、データバインディングする形になってしまっています。
- データバインディングでケバブケースでプロパティを記述すると、エラーにはひとつひとつ区切って表示される。
- ケバブケースで複数のプロパティをまとめて指定することはできない。（NaNになる）
対処法
対処法は間違ったデータバインディングを削除することです。
<div :class="c-picture-wrapper">↓ 修正
<div class="c-picture-wrapper">
以上でエラーが出なくなります。
（補足）エラー修正時の注意点
エラーを修正するために、存在しないと言われているプロパティを追加すればエラーが消えます。
例えば、Property or method “〇〇” is not definedで、「c」「picture」「wrapper」という場合は以下のようにします。
<script>
export default {
data(){
return{
c: "c",
picture: "picture",
wrapper: "wrapper"
}
}
}
</script>ですが、これではテンプレート内の :class=”picture-wrapper” が解決されていません。
かつ、これはコンパイル後に何も定義されていない状態（NaN）になってしまいます。class=”picture-wrapper” には変換されません。
なので、Property or method “〇〇” is not definedというエラーが発生したら、エラーと認識されているところを探して、きちんと修正することが大切です。
