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

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って何？という方は、こちらの記事が参考になりました！

Quick Tip: What Are Factory Functions in JavaScript — SitePoint

Dan Prince looks at factory functions in JavaScript, examining the different types, their use cases & how they allow us to separate data from computations.

www.sitepoint.com

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

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