vue.js v-for 不渲染组件 laravel

Question

我正在尝试在我的网站中构建用户消息传递。所有数据都在通过，但由于某种原因，我无法让它在浏览器上正确呈现。如果我删除回复部分，将呈现第一条消息。控制台中的错误信息是

渲染函数出错：“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="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="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"

Answer 1

在某些时候，message.replies 是未定义的。这意味着当您尝试访问 replies 的 data 属性时，您将抛出观察到的错误。

你可以用警卫来防止这种情况发生。

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

v-if 阻止该部分在没有回复时尝试呈现。

你也可能需要处理

<div class="media-left" v-if="reply.user && reply.user.data">
  <img v-bind:src="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 可能未定义的情况。