javascript - 嵌套数组中的Vue处理null

我来自 Ruby 语言,很抱歉这个菜鸟问题。我从 API 收到了这个回复:

[{:id=>"61b79d02a0f6af001374744e",
  :name=>"Waffle Crewneck",
  :code=>"FW22KS000",
  :result=>{"status"=>"Success", "message"=>"FW22KS000 - Synced"},
  :last_sync_at=>Wed, 18 May 2022 23:51:45.195079000 UTC +00:00},{:id=>"611ea9a7392ab50013cf4713", :name=>"2-Tone Hoodie", :code=>"SS22CH013", :result=>nil, :last_sync_at=>nil},]

我想在 table 中显示:

<tr v-for="product in fetchedProductSyncStatus" :key="product">

<td class="text-bold">
  {{ product.result.status }}
</td>
<td class="text-bold">
  {{ product.result.message }}
</td>
<td class="text-bold">
  {{ product.last_sync_at }}
</tr>

因为在第二个数组元素 product.result == nil 我有一个错误:

TypeError:无法读取 null 的属性(读取“状态”)

寻找类似于 Ruby 的 product.result&.message 的东西。如何在 Vue 中避免此类错误并改为显示空字符串?

回答1

TypeScript 中也有同样的东西,称为可选链。请参阅:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

{{ product.result?.message }}

或旧式 product.result && product.result.message

编辑:模板中的可选链接仅适用于 Vue3

回答2

我相信这更像是一个 javascript 而不是 Vue 问题......你可以做这样的事情来检查 product.result 是否可用:

{{product.result ? product.result.status : null}}

{{ product.result && product.result.status }}

相似文章

最新文章