LoginSignup
2
0

More than 5 years have passed since last update.

[Vue warn]: Property or method "_anyProperty" is not defined on the instance but referenced during render.

Last updated at Posted at 2018-09-05

[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


  1. 正確にはvm.$data.propertyでアクセスすれば問題ないですが冗長です 

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0