目次
Propsのdefault値にObjectを指定したらエラーになった
NuxtでPropsを使用する際に、default値としてObjectを指定したらエラーになりました!
今回は、Propsのdefault値にObjectやArrayを指定する際に発生したエラーとその対処方法について書いていきます!
Propsのdefault値にObjectを指定した際の例
実際にPropsにObjectを指定した時のコードがこちらです!
このように、Propsのdefault値に{}と指定するとエラーになりました。
props: {
sampleProps: {
type: Object,
default: {},
}
},
発生したエラー
先ほどのコードで実行した際には、以下のエラーとなってしまいました。
どうやらエラーメッセージの内容としては、Propsのdefault値へObjectやArrayを指定する際は、factory functionを使う必要があるというエラーメッセージのようです。
Object/Array must use a factory function to return the default value.
factory functionって何?
factory functionって何?という方は、こちらの記事が参考になりました!
When a function returns an object, we call it a factory function.
https://www.sitepoint.com/factory-functions-javascript/
どうやらオブジェクトを返す関数のことをfactory関数というらしいですね!
lintをかけて発生したエラー
ちなみに、lintをかけると以下のようなエラーが発生しました!
$ yarn lint
yarn run v1.17.3
$ eslint --ext ./ 'src/**/*.{js,jsx,ts,tsx}'; stylelint 'src/**/*.{css,scss,sass}'
/Users/kou/Documents/git/nuxt/nuxt_sample/src/pages/index.ts
7:7 error Type of the default value for 'sampleProps' prop must be a function vue/require-valid-default-prop
✖ 1 problem (1 error, 0 warnings)
✨ Done in 3.96s.
対処方法
対処方法は簡単です!
エラーメッセージにあった通り、factory functionにしてあげましょう!
以下のようにdefault値を() => {}としましょう!
オブジェクトを返す関数なので、これでfactory関数になっていますね!
props: {
sampleProps: {
type: Object,
default: () => {},
}
},
まとめ
今回は、Propsのdefault値にObjectやArrayを指定する際の注意点について書きました!
エラーが出るとしんどいですが、エラーを通じてfactory functionなども理解できたので良かったです!
皆さんも同じようなエラーになった場合は是非参考にしてください!
コメント