vuejsのエラーをなんとかしたいっ!

Vuejsを触っていて表示されたエラーをメモっていきます。

Property or method “hoge” 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にhogeのデフォルトが設定されていない

デフォルトを設定

<script>
export default {
  data: {
    hoge: ''
  }
}
</script>

Error in nextTick: “InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘,’ is not a valid attribute name.”

,の場所が悪い(というか変な場所に入っている)

<p class="aaa", id="bbb">aaaa</p>

になっていた…

修正後

<p class="aaa" id="bbb">aaaa</p>

Unknown custom element: <Hoge> – did you register the component correctly? For recursive components, make sure to provide the “name” option.

このエラーが出たときはcomponentsの中身がなにかしらおかしい。(名前が間違っているとか)

<script>
import Hoge from './Hoge.vue';

export default {
  components: {
    Hooooooge
  }
}
</script>

指定しているコンポーネント名が間違っていたので直しました。

<script>
import Hoge from './Hoge.vue';

export default {
  components: {
    Hoge
  }
}
</script>