javascript - 如何处理(或忽略)VueJS 中的空属性？

Question

我有一个来自图表的一部分的 Javascript 对象，在某些行上可能没有所有数据详细信息

所以当我把它放在 HTML 上时

{{ip.Out.StockItem[0].Out.Properties.Name}}

VueJS 在控制台上给出这个错误

Unable to get property 'Name' of undefined or null reference"

并且当 Properties 为 null 时不呈现页面。

我试过了

{{ip.Out.ItemEstoque[0].Out.Properties?.Nome}}

但是没有错误，也没有呈现页面。

数据来自 WebAPI，我不能强制所有对象都填充所有数据。

如何解决？

Answer 1

使用三元if语句。

以下代码检查 ip.Out.StockItem[0].Out.Properties 是否存在，如果为真则获取 Name，否则不显示任何内容。

{{ip.Out.StockItem[0].Out.Properties ? ip.Out.StockItem[0].Out.Properties.Name : ''}}

或者你也可以使用模板

<template v-if="ip.Out.StockItem[0].Out.Properties">
    {{ip.Out.StockItem[0].Out.Properties.Name}}
</template>
<template v-else>
    -NO DATA-
</template>