Question

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

渲染函数出错：“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未定义。这意味着当您尝试访问data的{{1}}属性时，您会抛出观察到的错误。

你可以通过警卫来阻止这种情况。

replies

如果没有回复，<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 }} • {{ reply.created_at_human }}</p> <div class="panel panel-default"> <div class="panel-body"> {{ reply.body }} </div> </div> </div>），你就需要注意处理中间something.something.something可能未定义的情况。

vue.js v-for not rendering component laravel

1 个答案: