获取深层嵌套对象时无法读取 null/undefined 属性

Question

我目前正在从 api 获取一个对象到我的 vue 前端。这个对象有很多属性，甚至是深层嵌套的属性。例如项目对象：

{
  id: 1,
  title: "My Project",
  status: {
    text: "Planned"
    color: "Orange"
  },
  ...
}

当获取这个对象时，我将它放入

ref()

中，如下所示：

const project = ref()
const fetchProject = async () => {
  const url = "api-url"
    try {
      const response = await axios.get(url)
      project.value = await response.data

    } catch (error) {
      console.log(error)
    }
}

现在，当我尝试使用

{{ project.status.text }}

调用 html 中的属性时，它显示“无法读取 null/未定义”属性。使用

console.log(project)

时，可以正确获取对象。

现在我知道，我可以使用 v-if 来检查属性是否已设置，但由于对象太大，我需要将这个 v-if 添加到需要项目属性的所有元素中。有没有更干净、更优雅的方法来解决这个问题？

Answer 1

由于最初您的

project

是空的，您可以将

v-if

放在使用

project

的整个模板周围：

<template v-if="project">
{{ project.status.text }}
</template>
<div v-else>Loading project...</div>

或者在任何地方使用可选的链接运算符以及可能的默认值：

{{ project?.status.text ?? 'Default status' }}