vue.js の v-if を使った時の「Cannot read property ..... of undefined"」エラーに対処する

● vue.js の「Cannot read property ..... of undefined"」エラーに対処する

これはオブジェクトが undefined なのに、オブジェクトのメンバ変数にアクセスしようとした時によくおこります。
次のようにあらかじめ存在チェックを入れて回避しましょう。

{{ props.row.client.tel }}

  ↓ ( v-if を使って props.row.client の存在を確認する )

<span v-if="props.row.client">{{ props.row.client.tel }}</span>

● オブジェクトの中身がある場合の v-if

(例: projects の中身が3つ以上ある場合 )

<li v-if="props.row.projects.length > 2">

 ↓ エラーが出る場合はこのように書き換えます

<li v-if="props.row.projects && props.row.projects.length > 2">

参考 : https://bit.ly/2NPKyWB

No.1770
07/03 11:28

edit