概要
Vue.jsでapi/v1/properties/files/undefinedというエラーがDevツールのコンソールに表示されて、Internal Server Error 500になってしまいました。本記事ではこのエラーの原因と解決方法を記載します。
エラーの原因
原因は以下の箇所にありました。
:src="url+'api/v1/properties/files/'+property?.image"
property?.imageがundefinedのとき、api/v1/properties/files/undefinedという不正なURLになってしまったのです。
property?.imageは、Vue.jsのセーフナビゲーション演算子（optional chaining operator）を使用していますが、これはpropertyオブジェクトが存在しない場合にプロパティに安全にアクセスするための方法です。
ちなみに、property?.imageという表記は以下のように動作します。
・もしpropertyオブジェクトが存在する場合、そのimageプロパティの値が返される
・もしpropertyオブジェクトが存在しない場合、undefinedが返される
解決方法
以下のようにすると解決します。
:src="url+'api/v1/properties/files/'+property?.image" v-if="property?.image">
これにより、propertyオブジェクトが存在しない場合には<img>要素（または他の要素）自体がDOMに挿入されないため、不正なURLを回避できます。
このコードでは、プロパティ（property）オブジェクトのimageプロパティが存在する場合にのみ、v-ifディレクティブが評価されます。
v-ifディレクティブは、Vue.js において特定の条件が真の場合に、要素を描画するかどうかを制御するためのディレクティブ。その条件が真（存在する場合）の場合にのみ、親要素にバインドされた属性が有効になります。
つまり、プロパティオブジェクトにimageが存在しない場合、この要素はDOMに含まれないことになります。
これによってundefinedのエラーが解決できました。