Vuejs：渲染错误：“TypeError：无法读取属性'3' of null”

Question

我正在尝试创建一个表单，我可以使用该表单在数据库中输入和更新值，但我总是收到警告并且不知道如何摆脱它。我有一个包含具有 id 值的对象的数组，例如：

data = [{id_a: 2, id_b: 3},{id_a: 5, id_b: 10}, ...]

在相关组件的模板中，我循环遍历这个数组，并在表中为每个对象创建一行：

<template>
<div>
<table>
<tr
    v-for="(dataset, i) in data"
    :key="i"
    >
    <td>{{ a_selection[dataset.id_a] }}</td>
    <td>{{ b_selection[dataset.id_b] }}</td>
    </tr>
</table>
</div>
</template>

由于我不想显示 id 值而是显示与它们关联的名称，因此我从两个对象中获取名称，这里称为 a_selection 和 b_selection。

我在创建钩子期间从服务器的脚本部分获取这些对象，如下所示：

<script>
import axios
export default {
    created() {
        axios.get(http://127.0.0.1:5000/get_a/").then(response => (this.a_selection= response.data));
        axios.get(http://127.0.0.1:5000/get_b/").then(response => (this.b_selection= response.data));
    },
    data() {
        return {
            a_selection: null,
            b_selection: null,
            data: [{id_a: 2, id_b: 3},{id_a: 5, id_b: 10}]
        }
    }
};
</script>

当我尝试绘制这个时，我收到了 vue 警告：

[Vue warn]: Error in render: "TypeError: Cannot read property '2' of null"

并输入错误：

TypeError: Cannot read property '2' of null

出于某种原因，这样做会给我带来一些错误，但最终正确显示了想要的表格。 谁能帮我理解这里发生了什么？

Answer 1

所以它第一次尝试渲染仍然不存在的a_selection[2]

• 添加名为loading的新数据，您可以先将其设置为false
• 在发送任何请求之前的created()函数中，您可以将loading设置为true this.loading = true
• 一旦您成功从后端获取所有数据，您可以再次将 loading 设置回 false
• 您可以在加载设置为 true 时使用 v-if 加载加载器，并在加载数据时使用 v-else 来呈现您的表格。
• 您可以使用任何其他类似的数据（已加载、已获取等），以便能够使用 v-if 和 v-else 正确呈现您的数据。