【Vue・JS】nullの場合を考える必要あり！TypeErrorの回避法

Vueで宣言済みのプロパティを選択してるのにTypeErrorが表示される場合の対処法について。

状況

初期状態で空の配列に対し、配列内のプロパティを呼び出す設定を記述したところ、下記エラーが発生。

[Vue warn]: Error in render: "TypeError: Cannot read property 'aaa' of undefined"

指定した配列は初期状態は空だが、クリックイベントで中身が追加されていく。

発生原因

空の配列の存在しないプロパティが指定されていたためエラーが発生した。

▼勘違い
中身が空でもその要素は指定できる（aaa[0]はエラーにならない）。このため、中身が空の状態で将来入る予定のプロパティも指定可能と勘違いした。

空の配列arr=[]に対して、arr[0]としてもエラーにならない。

エラーにならない

<template>
  <div>
    <p>null test</p>
    <p>・arr:{{arr}}</p>
    <p>・arr[0]:{{arr[0]}}</p>
  </div>
</template>

arr[0].aaaなど、プロパティを指定した時点でエラーになる。

エラーになる

<template>
  <div>
    <p>null test</p>
    <p>・arr[0].aaa:{{arr[0].aaa}}</p>
  </div>
</template>

対処法

v-ifを使ってnullの時は表示しないように回避する。

▼配列の場合
配列の場合は長さが0以上を指定すればいい。

    <p v-if="arr.length > 0">
      ・{{arr[0].aaa}}
    </p>

ただし、この場合配列が空でもpタグは表示される。

▼値の場合
値の場合中身が空でもエラーにならないが、v-ifとBoolean()を使うことで、中身がない場合は表示させないようにできる。

    <p v-if="Boolean(text)">
      ・{{text}}
    </p>

▼配列が空の場合はタグを非表示にする
上記を組み合わせると、配列に値がある場合のみタグの表示ができるようになる。

    <p v-if="Boorean(arr) && arr.length > 0">
      ・{{arr[0].aaa}}
    </p>

VueというよりはJSの問題。JSはnullになる条件も考えながら組んでいく必要がある。