Vue 处理嵌套数组中的 null
Vue handle null in nasted array
我来自 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: Cannot read properties of null (reading 'status')
寻找与 Ruby 的 product.result&.message
类似的内容。如何在 Vue 中避免此类错误并改为显示空字符串?
TypeScript 中也有同样的东西,称为可选链接。参见:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
{{ product.result?.message }}
或者 old-style product.result && product.result.message
编辑:模板中的可选链接仅适用于 Vue3
我认为这更多是 javascript 而不是 Vue 问题...您可以这样做来检查 product.result
是否可用:
{{product.result ? product.result.status : null}}
或
{{ product.result && product.result.status }}
我来自 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: Cannot read properties of null (reading 'status')
寻找与 Ruby 的 product.result&.message
类似的内容。如何在 Vue 中避免此类错误并改为显示空字符串?
TypeScript 中也有同样的东西,称为可选链接。参见:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
{{ product.result?.message }}
或者 old-style product.result && product.result.message
编辑:模板中的可选链接仅适用于 Vue3
我认为这更多是 javascript 而不是 Vue 问题...您可以这样做来检查 product.result
是否可用:
{{product.result ? product.result.status : null}}
或
{{ product.result && product.result.status }}