【Vue】ヌルチェック(null判定)の方法。エラー対処法:vue.runtime.esm.js [Vue warn]: Error in render: “TypeError: Cannot read property ‘xxx’ of undefined”

vue-js-prograshi(プロぐらし)-kv Vue.js
記事内に広告が含まれていることがあります。

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」が存在していればその値が表示され、存在しなければ何も表示されなくなります。


タイトルとURLをコピーしました