[Vue warn]: Property or method "_anyProperty" 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.
上記のようなエラーメッセージがwarningに表示されました。
初歩的ミスですが健忘録として
下のようなComponentを作ってるときに表示されました。
<template>
<p> {{ _anyProperty }} </p>
</template>
<script>
export default {
props : ['anyPropery']
data() {
return {
_anyProperty : this.anyPropery
}
}
}
</script>
原因は単純でVue.jsのdataプロパティで'_'と'$'で始まる名前は駄目です。 1
初歩的です。名前を変更すれば動きます。
<template>
<p> {{ myAnyPropery }} </p>
</template>
<script>
export default {
props : ['anyPropery']
data() {
return {
myAnyPropery : this.anyPropery
}
}
}
</script>
参考
https://github.com/vuejs/vue/issues/2098
ドキュメントにも書かれてます。。。
https://jp.vuejs.org/v2/api/#data
同じエラーメッセージでもv-forで出力されることが多いみたいです。
https://qiita.com/kawakami-kazuyoshi/items/3f55b5cf7d745065b2c8
-
正確にはvm.$data.propertyでアクセスすれば問題ないですが冗長です ↩