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 で解決することが出来たが、初期設定でも解決できそうな気もするので、今後機会があれば試してみたいと思う。