nullのオブジェクトをするとエラーになる
Vueではオブジェクトのデータを画面上に呼び出すときに、値がnullとなっている(存在しない)プロパティ名指定すると、次のようなエラー(警告)を表示します。
vue.runtime.esm.js:638 [Vue warn]: Error in render: "TypeError: Cannot read property 'プロパティ名' of undefined"
つまり、以下の状態にしてはいけないということです。
null.プロパティ名
この状態はよくないので、エラーが表示されない状態にする必要があります。
ヌルチェック(null判定)の方法
値がnullかどうかを判定することをヌルチェック(null判定, nullチェック)といいます。
Vue.jsでは以下のように記述します。
{{ ( オブジェクト || {} ).プロパティ名 }}
何をしているかというと、オブジェクトの値が存在するなら「オブジェクト.プロパティ名」を呼び出し、オブジェクトがnullの場合は「{}.プロパティ名」を実行するということです。
「{}.プロパティ名」とすることで、エラー(警告)ではなく、値が空となります。
(補足)書き換えの内容
{{ オブジェクト.プロパティ名 }}
↓ これを以下のように書き変えるということです。
{{ ( オブジェクト || {} ).プロパティ名 }}
実例
「items」というオブジェクトのプロパティ「xxx」を呼び出す場合は以下のようにします。
<div>{{ items.xxx }}</div>
↓ 修正
<div>{{ ( items || {} ).xxx }}</div>
これで、「items」の中にプロパティ「xxx」が存在していればその値が表示され、存在しなければ何も表示されなくなります。