我來自 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},]
我想在表格內顯示：
<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 中避免此類錯誤并改為顯示空字串？
uj5u.com熱心網友回復：
TypeScript 中也有同樣的東西，稱為可選鏈。請參閱：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
{{ product.result?.message }}
還是舊式product.result && product.result.message
uj5u.com熱心網友回復：
我相信這更像是一個 javascript 而不是 Vue 問題......你可以做這樣的事情來檢查是否product.result可用：
{{product.result ? product.result.status : null}}或者
{{ product.result && product.result.status }}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/478075.html
標籤：javascript Vue.js
上一篇：在VueSFC中獲取回圈鍵