Coming from a background in Ruby code, I have a question for you. I recently received this API response:
[{: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},]
I am looking to present this data within a table structure:
<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>
But when the product.result is nil in the second array element, I encounter an error:
TypeError: Cannot read properties of null (reading 'status')
In Ruby, I would use something like product.result&.message. How can I prevent this error in Vue and display an empty string instead?