代码之家 › 专栏 › 技术社区 › Tony

如何处理(或忽略)Vuejs中的空属性?

vuejs2 html javascript

Tony · 技术社区 · 6 年前

我有一个来自图形部分的javascript对象,在某些行上可能没有所有数据详细信息。

所以当我把这个放在HTML上

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

Vuejs在控制台上给出此错误

无法获取未定义或空引用的属性“name”

当 Properties 为空。

我试过了

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

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

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

如何解决这个问题?

2 回复 | 直到 6 年前

Tony 6 年前

使用三元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>

Jacob Goh 6 年前

如果任何属性在对象的任何级别上都可以为空或未定义,则最无错误的方法是

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

但显然这太冗长了。像图书馆一样 https://github.com/erictrinh/safe-access 可以让你的生活更轻松