Vue3：嵌套 JSON 对象数据的显示不起作用

Posted 2023-02-22

【中文标题】Vue3：嵌套 JSON 对象数据的显示不起作用

【英文标题】：Vue3: Displaying of nested JSON object data does not work

【发布时间】：2021-11-25 04:59:14

【问题描述】：

我正在尝试显示来自嵌套 JSON 对象的数据。从 axios 正确检索数据，但我没有显示它。

json 对象如下所示：

        "id": "1",
        "name": "Germany",
        "continent": "Europe",
        "president": 
            "id": "12",
            "name": "Joanna Doe",
        

在 vue 组件中，数据保存在“国家”对象中。

. . .
data() 
   country: ,

如果我尝试在 vue 模板中渲染它，如果我渲染以下内容，我会得到所有数据：

<p> country </p>

但如果我尝试像这样渲染嵌套的“总统”属性的数据：

<p> country.president.name  </p>

我收到以下错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy.<anonymous> (CountryDetail.vue:25)
    at renderComponentRoot (runtime-core.esm-bundler.js:1165)
    at componentEffect (runtime-core.esm-bundler.js:5184)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)
    at setupRenderEffect (runtime-core.esm-bundler.js:5137)
    at mountComponent (runtime-core.esm-bundler.js:5096)
    at processComponent (runtime-core.esm-bundler.js:5054)
    at patch (runtime-core.esm-bundler.js:4660)
    at componentEffect (runtime-core.esm-bundler.js:5191)

有没有办法渲染这些嵌套数据？

谢谢！

【参考方案1】：

country 最初是一个空对象（后来更新），但您的模板尝试立即呈现嵌套属性：

<p> country.president.name  </p>

这样会报错，因为country.president最初是不存在的，所以是undefined，导致从undefined读取name出错。

解决此问题的一种方法是 conditionally render 仅在定义 country.president 时 <p> ：

<p v-if="country.president"> country.president.name </p>

或者使用 Vue 3，您可以使用 optional chaining 来避免运行时错误。但是，<p> 元素仍会以空主体呈现。 （如果不需要空标签，请坚持上面的条件渲染方案。）

<p> country.president?.name </p>

【参考方案2】：

"continent": "Europe" 后面缺少一个逗号 ,

您的代码应该可以工作。 See this example

【讨论】：

我认为这只是问题中的错字。否则，OP 会在看到 TypeError 之前得到 SyntaxError。