Question

我不明白为什么vuejs仅在axios GET请求中的结果最多包含7个元素时才起作用。

这是代码：

<template>
    <div class="chat-messages">
        <div v-for="message in messages" :key="message.id" class="message">
            <div class="avatar">
                <img :src="message.user.profile_image">
            </div>
            <div class="text">
                <p class="user">{{ message.user.name }}</p>
                <p>
                    {{ message.text }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            messages: [],
        }
    },
    created() {
        axios.get('/messages')
            .then((res) => {
                this.messages = res.data;
            })
            .catch((err) => {
                console.log(err.response);
            })
    }
}
</script>

这就是我的JSON的样子（仅作为示例）：

[
{
"id": 142,
"user_id": 2,
"text": "Minima delectus saepe eos aliquam.",
"created_at": "2019-05-09 16:28:56",
"updated_at": "2019-05-09 16:28:56",
"user": {
"id": 2,
"name": "Libbie Tremblay Sr.",
"email": "hilda.koss@example.org",
"profile_image": "https://via.placeholder.com/150",
"email_verified_at": "2019-05-09 16:28:44",
"created_at": "2019-05-09 16:28:44",
"updated_at": "2019-05-09 16:28:44"
}
},
{
"id": 143,
"user_id": 15,
"text": "Officia fugit minus doloremque dolorem.",
"created_at": "2019-05-09 16:28:56",
"updated_at": "2019-05-09 16:28:56",
"user": {
"id": 15,
"name": "Estevan Krajcik",
"email": "ryan.rashad@example.org",
"profile_image": "https://via.placeholder.com/150",
"email_verified_at": "2019-05-09 16:28:44",
"created_at": "2019-05-09 16:28:44",
"updated_at": "2019-05-09 16:28:44"
}
}
]

如果我发送的元素超过7个，那么它会告诉我：

Error in render: "TypeError: Cannot read property 'profile_image' of null"

found in

如果我删除了那部分代码，则表明它无法读取“名称”。

这太奇怪了...

Answer 1

这是因为您试图从不存在的对象中获取个人资料图片。

在引用对象之前，应始终检查数据。

<div class="avatar" v-if="message.user && message.user.profile_image">
    <img :src="message.user.profile_image">
</div>

如果数组中只有7个元素，则Vue v-for可以工作

1 个答案: