【Nuxt】Propsのdefault値にObjectやArrayを指定する際の注意点

Nuxt

Propsのdefault値にObjectを指定したらエラーになった

NuxtでPropsを使用する際に、default値としてObjectを指定したらエラーになりました!

今回は、Propsのdefault値にObjectArrayを指定する際に発生したエラーとその対処方法について書いていきます!

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なども理解できたので良かったです!

皆さんも同じようなエラーになった場合は是非参考にしてください!

オススメの関連商品

コメント