VueのProp（配列）の初期化の記述ミス
Vueのコンポーネントに新たに配列を受け渡すことになり改修を実施したが、いくつかミスをし、ソースコミット後に別タスク担当の方から指摘を受けるまで、ミスに気づけなかった。
調査したらすぐ解決したのだが、備忘録として残しておくことにする。
VueのPropの初期化記述ミス
@Prop( default: [] )
ignoreFields?: FieldPath[]正しくは、ファクトリ使うんだとの記載が、公式サイトでも見かけられた。
（Vueのプロパティのサンプルコード中のコメント）
@Prop( default: () => [] )
ignoreFields?: FieldPath[]ファクトリによる初期化の形をとらないと、こちらの記事で説明があるように複数コンポーネント間でObject、配列が共有されてしまうため、正しくデータが取り扱えなくなる。
動作確認時のミス
上記の記述ミスをしたのだが、動作確認でもミスしたため、気づけなかった。
- ビルド時には、特に警告もエラーも出ない。
- Propに値を渡している場合は、警告も出ずに普通に動作する。
このため、Propを使わないパターンでテストや動作確認をしないと、問題が発生しない。
今回は、Propに値を渡す使い方のみしか確認していなかったため、気づくのが遅れた。
Propに値を渡さないでコンポーネントを呼び出すと、下記みたいな警告が出る。
Invalid default value for prop "XXXXX": Props with type Object/Array must use a factory function to return the default value.まとめ
当たり前だが、コンポーネントにインプットを増やしたので、パターン網羅して動作確認すべきだった。コンポーネント単体のテストが用意されていないため、画面から動作確認をしたこともあり、全呼び出しパターンについて試せていなかった。