Как обрабатывать (или игнорировать) нулевые свойства в VueJS?

Question

У меня есть объект Javascript из части графика, который в некоторых строках может содержать не все детали данных

Так что, когда я помещаю это в HTML

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

VueJS дает этоошибка на консоли

Невозможно получить свойство 'Имя' с неопределенной или нулевой ссылкой "

и не отображает страницу, когда Properties равно нулю.

Я пытался

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

Но тогда нет ошибок, и страница не отображается.

Данные поступают из WebAPI, и я не могу заставить все объекты заполнять все данные.дюйма

Как решить эту проблему?

Answer 1

, если какое-либо свойство может быть нулевым или неопределенным на любом уровне объекта, наиболее безошибочный способ -

    {{
        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 может сделать вашу жизнь проще

Answer 2

Используйте троичное выражение if.

Следующий код проверяет, существует ли ip.Out.StockItem[0].Out.Properties, и если true, получает 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>