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 请求 returns 数据。但是，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 属性

I have a Vue component with the following data:
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.

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

Vue.JS nested v-for throwing null/undefined error

javascript

single-page-application

vue.js

axios

在问题末尾更新。