v-forでリレーションで取得した配列をループする方法がわからない

Question

前提・実現したいこと

vue.jsでv-forでリレーションで取得した配列をループする方法を知りたいです。

発生している問題

このようにすると画面の読み込みができなくなります。

<div v-for="(comment, index) in answer.comments" :key="index">

該当のソースコード

 <div v-for="(answer, index) in answers" :key="index">
//省略
   <div v-for="(comment, index) in answer.comments" :key="index">
              <div class="col-sm-1">
                <i class="far fa-user-circle fa-2x pe-0"></i>
              </div>
              <div class="col-sm-10 p-0">
                <p class="my-auto">{{ comment.user.name }}</p>
              </div>
              <div class="col-sm-12 mt-2">
                <div class="border-start ms-3 ps-2 border-dark">
                  <small>{{ comment.created_at }}</small>
                  <p>{{ comment.body }}</p>
                </div>
              </div>
            </div>
          </div>

試したこと

commentsが取得できているのか確かめ、下記のように配列で所得できていることがわかりました。

[ { "id": 1, "body": "fasd", "user_id": 3, "answer_id": 3, "created_at": "2021-12-18 11:15:06", "updated_at": "2021-12-18 11:15:06" }, { "id": 2, "body": "fasd", "user_id": 3, "answer_id": 3, "created_at": "2021-12-18 11:15:11", "updated_at": "2021-12-18 11:15:11" }]

補足情報（FW/ツールのバージョンなど）

laravel 6.20.37
vue 2.6.11

Answer 1

laravelのapiでloadでuserを渡していないのが原因でした。