vue.js v-for nie wyświetla komponentu laravel - laravel, vuejs2

Próbuję wbudować wiadomości użytkowników w moją stronę. Wszystkie dane są przekazywane, ale z jakiegoś powodu nie mogę zmusić ich do renderowania bezpośrednio w przeglądarce. Jeśli usunę odpowiedzi, jeśli sekcja, zostanie wyświetlony pierwszy komunikat. Komunikat o błędzie w konsoli to

Błąd w funkcji renderowania: „TypeError: Nie można odczytać właściwości„ data ”niezdefiniowanej

<template>
<div v-if="message">

<ul class="list-inline" v-if="message.users.data.length">
<li><strong>In conversation</strong></li>
<li v-for="user in message.users.data">{{ user.first_name }}</li>
</ul>


<div class="media" v-for="reply in message.replies.data">
<div class="media-left">
<img v-bind:src="/images/reply.user.data.avatar" v-bind:alt="reply.user.data.name + " avatar"">
</div>

<div class="media-body">
<p>{{ reply.user.data.name }} &bull; {{ reply.created_at_human }}</p>
<div class="panel panel-default">
<div class="panel-body">
{{ reply.body }}
</div>
</div>
</div>
</div>

<div class="media">
<div class="media-left">
<img v-bind:src="/images/message.user.data.avatar" v-bind:alt="message.user.data.name + " avatar"">
</div>
<div class="media-body">
<p>{{ message.user.data.name }} &bull; {{ message.created_at_human }}</p>
<div class="panel panel-default">
<div class="panel-body">
{{ message.body }}
</div>
</div>
</div>
</div>
</div>

</template>

<script>
import { mapActions, mapGetters } from "vuex"

export default {
computed: mapGetters({
message: "currentMessage",
}),
}
</script>

///

         message:Object
body:"Message two"
created_at_human:"1 day ago"
id:3 last_reply_human:"1 day ago"
parent_id:null replies:Object
data:

Array[2]
0:Object
body:"Another reply"
created_at_human:"1 day ago"
id:5 last_reply_human:null
parent_id:3

1:Object
body:"Reply to message two"
created_at_human:"1 day ago"
id:4 last_reply_human:null
parent_id:3 user:Object

data:Object avatar:"https://www.gravatar.com/avatar/44a0d18d423d13e1ce8ea37a6e7bb728?s=45&d=mm"
id:12 name:"James"
users:Object data:

Array[2]

0:Object avatar:"https://www.gravatar.com/avatar/44a0d18d423d13e1ce8ea37a6e7bb728?s=25&d=mm"
id:12
name:"James"

1:Object avatar:"https://www.gravatar.com/avatar/0b6703d371c28c3c5baef0d80f49a5ea?s=25&d=mm"
id:7
name:"Dustin"

Odpowiedzi:

W pewnym momencie, message.replies jest niezdefiniowany. Oznacza to, że kiedy próbujesz uzyskać dostęp do data własność replies rzucasz zaobserwowany błąd.

Możesz temu zapobiec za pomocą strażnika.

<template v-if="message.replies" >
<div class="media" v-for="reply in message.replies.data">
...
</div>
</template>

The v-if zapobiega próbom renderowania sekcji, jeśli nie ma odpowiedzi.

Być może będziesz musiał poradzić sobie

<div class="media-left" v-if="reply.user && reply.user.data">
<img v-bind:src="/images/reply.user.data.avatar" v-bind:alt="reply.user.data.name + " avatar"">
</div>

i

<div class="media-body" v=if="reply.user && reply.user.data">
<p>{{ reply.user.data.name }} &bull; {{ reply.created_at_human }}</p>
<div class="panel panel-default">
<div class="panel-body">
{{ reply.body }}
</div>
</div>
</div>

Zasadniczo za każdym razem, gdy masz długi łańcuch kropkowy (something.something.something), musisz uważać na przypadki, w których środek something może być niezdefiniowany.