Vue.jsで入れ子のプロパティにアクセスすると「Cannot read property 'name' of null」

Question

下記階層の連想配列があり、ratingsをループし、user連想配列のnameを取得しようとしています。

   product: {
        ratings: [
          {
            user_id: 1,
            product_id: 1,
            rating: 4,
            comment_title: "コメントタイトル",
            comment_description: "コメント説明",
            created_at: "2021-02-11",
            user: {
              id: 1,
              name: "テスト太郎",
            },
          },
        ],
      },

テンプレートで、rating.user.nameとアクセスするとエラーが出てしまいます。
product.ratings[0].user.nameだと取得できるが、
product.ratings[index].user.nameだと取得できない挙動も理解できていません。
index自体をマスタッシュ展開すると、0から順に表示できるので値自体は取れているようです。

      <v-container v-for="(rating, index) in product.ratings" :key="index">
            <v-icon large>mdi-account-circle </v-icon>
            <!-- エラー -->
            <div class="pl-1">{{ rating.user.name }}</div>
            <!-- 正常動作 {"id":1,"name :"テスト太郎"}-->
            <div class="pl-1">{{ rating.user }}</div>
            <!-- エラー -->
            <div class="pl-1">{{ product.ratings[index].user.name }}</div>
            <!-- 正常動作 テスト太郎-->
            <div class="pl-1">{{ product.ratings[0].user.name }}</div>
       </v-container>

Answer 1

リレーション先のuserが一部nullだった事が原因でした。
DBの整合性を整えた所解決しました。

Answer 2

<v-container v-for="(rating, index) in product.ratings" :key="index">

この部分のratingにはproduct.ratings[index]がv-forで回っているはずです。
つまり

<div class="pl-1">{{ rating.user.name }}</div>
<!-- 正常動作 {"id":1,"name :"テスト太郎"}-->
<div class="pl-1">{{ rating.user }}</div>
<!-- エラー -->

のrating.user.nameと記述している箇所はproduct.ratings.user.nameと同義です。これにはindexが振られておりません。
おそらくrating[index].user.nameと記述すると想定通りの挙動になるはずですがどうでしょうか？

Comments

[redux]

回答ありがとうございます。
上記記述でも同一エラーが出てしまいました。

よくよく調べてみるとraintingsの一部のリレーション先のuserがnullな事が原因だとわかりました。

ご対応ありがとうございました。