Vue.js "プロパティを読み取ることができません..." - 期待された動作を回避する

Question

Vue.jsテンプレートにオブジェクトのプロパティを表示し、そのオブジェクトが未定義である - コンポーネントがクラッシュする。通常の変数は未定義であれば問題ありません。

この動作はkilljoyです。かなり一般的な私の状況では、この問題を避ける最良の方法は何ですか？

したがって、NoSQLデータベース（Mongo）にデータを格納し、Vue.jsコンポーネントを使用してコレクション内のドキュメントを表示および変更します。どちらがうまくいく。

しかし、プロパティを持つオブジェクトをスキーマに追加すると（zip、state ...などのアドレス）、コンポーネントを表示して更新すると、Webアプリケーション内のすべてのコンポーネントがクラッシュするため、オブジェクトはデータ内にありません。データベースを通過して既存のすべてのドキュメントにこの「アドレス」オブジェクトを追加しない限り、（新しいオブジェクトを含む）新しいドキュメントのみが正しく表示されます。

テンプレートが空白を表示したり、データベースにまだ存在しないデータを追加したりする機会をユーザに与えることができれば、素晴らしいことでしょう。

このような状況ではどのようなベストプラクティスですか？

オブジェクトはここでは避けなければなりませんか？

Answer 1

これは実際にVueとは関係ありません。あなたはここでjavascriptエラーを扱っています。 null /未定義の変数のプロパティは参照できません。この場合の簡単な方法は、& &演算子を使用してオブジェクトをチェックすることです。

someObj && someObj.property 

someObjが偽である場合、右側は決して評価されません。左側が真実である場合、& &が右側を返すことに注意してください。詳細：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

あなたが特定のブランク値をしたい場合は、この

someObj ? someObj.property : "Default value"