Vue.JS 嵌套 v-for 抛出 null/undefined 错误

Question

在问题结束时更新。

我有一个带有以下数据的 Vue 组件：

conversations: null,
currentConversation: null,

以及在mounted()上运行的以下方法：

/**
 * Method to retrieve the user's conversations.
 */
getConversations() {
    axios.get('/api/user/conversations')
    .then((response) => {
        this.conversations = response.data;
    })
    .catch((error) => {
        console.log(error);
    })
},

在<template> 中，我使用以下内容显示每个对话：

<template v-for="conversation in conversations">
    <div class="conversation">
        <p>
            <!-- Template for each user -->
            <template v-for="(user, index) in conversation.users">
            {{ user.first_name }} {{ user.last_name }}<span v-if="index != (conversation.users.length - 1)">,</span>
            </template>
        </p>
    </div>
</template>

在当前对话的<template> 中，我尝试使用以下内容：

<template v-for="message in currentConversation.messages">
    <div class="message">
        <div class="bubble">
            {{ message.content }}
        </div>
    </div>
</template>

最初安装时，conversations 和 currentConversation 都为空。显示conversations 的模板工作正常。在 Ajax 请求返回数据之前，它是空的。但是，currentConversation 会抛出以下错误：

Uncaught TypeError: Cannot read property 'messages' of null

当用户选择要查看的对话时，稍后会通过 Ajax 检索 currentConversation 对象。

我发现，如果我使用 v-if="currentConversation" 指令将当前对话 <template> 包装在另一个 div 中，则不会出现错误，并且模板会正确呈现。但是，既然我不必在对话<template> 上使用v-if hack，为什么我需要在当前对话<template> 上使用它？

更新：感谢@wing 和@Traxo，使用空数组进行初始化是可行的。但是，我不明白为什么我必须为currentConversation 设置一个空数组，但不要为conversations 设置一个空数组。

Answer 1

currentConversation: {},

插入

currentConversation: null,

Answer 2

有什么问题？

你用null初始化你的currentConversation属性。

我有一个带有以下数据的 Vue 组件：

conversations: null,
currentConversation: null,

v-for="message in currentConversation.messages" 尝试迭代 currentConversation.messages 的可枚举属性。

但是 currentConversation 最初是 null。因此

Uncaught TypeError: Cannot read property 'messages' of null

对此我能做些什么？

您可以使用空数组初始化currentConversation.messages。

currentConversation: {
  messages: [],
},

这是为了让 Vue 可以尝试迭代 currentConversation.messages 并明确指示 currentConversation 应该有 messages。