Vue.jsで初期値がnullなJSONをspanに入れて動的に値を変更できるようにする

状況

APIにデータを投げて、それをJSONで受け取ったものから、hogehoge.hoge.hohe[0]のように指定して、spanタグ内に表示しようとしたところエラーとなってしまい、送信前画面が表示されなくなった。

エラー内容

Uncaught TypeError: Cannot read properties of null (reading 'hoge')

原因

初期値のJSONがnullなため、hogehoge.hogeとしたとき、hogehogeはnullとして値が存在しているが、hogehogeのなかにhogeはないとなってしまうためである。

実際に動くようにしたコード

vue

<template>
  <div class="response_group">
    <h3>レスポンス</h3>
    <span v-if="fetchedData">assistant:{{ fetchedData.responses.messages[0].result.content }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fetchedData: null,
    };
  },
  props: ['fetchedData'],
};
</script>

エラーを起こしたときの流れ

当初、

vue

<span>{{ hogehoge }}</span>

が、APIに投げる前の段階であっても、問題なく表示されたため、下記コードに変更したところ送信画面が表示されなくなってしまった

vue

<span>{{ hogehoge.hoge.hoge[0] }}</span>

これが、表示されない原因としては、hogehohe[以下]が見つからないためであるようだ。
そのため、今回の目標である「受けっとったときに画面に表示する」というものを実現するために、次のように実装しなおした。

解決方法

vue

<span v-if="hogehoge.hoge">{{ hogehoge.hoge.hoge[0] }}</span>

このようにして、値がない場合であってもきちんと、送信用の画面が表示されるようになった。

まとめ

今回は v-if で解決することが出来たが、初期設定でも解決できそうな気もするので、今後機会があれば試してみたいと思う。