vue.js v-для не візуалізації компонента laravel - laravel, vuejs2

Я намагаюся вбудувати повідомлення користувачів на свій сайт. Усі дані передаються, але з якихось причин я не можу змусити їх відтворити прямо у браузері. Якщо я видалю відповіді, якщо розділ, відобразиться перше повідомлення. Повідомлення про помилку в консолі

Помилка у функції візуалізації: "TypeError: Не вдається прочитати властивість" дані "невизначеного

<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"

Відповіді:

В деякій точці, message.replies не визначено. Це означає, що при спробі отримати доступ до data властивість replies ви викидаєте помічену помилку.

Ви можете запобігти цьому за допомогою охоронця.

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

The v-if перешкоджає спробі відображення розділу, якщо немає відповідей.

Вам також може знадобитися обробка

<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>

і

<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>

По суті, у будь-який час, коли у вас довгий крапковий ланцюжок (something.something.something), вам потрібно буде подбати про обробку випадків, коли середній something може бути невизначеним.