Soy del idioma Ruby, lo siento por la pregunta de novato. Tengo esta respuesta de la 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},]Que quiero mostrar dentro de la tabla:
<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> Porque en el segundo elemento de matriz product.result == nil tengo un error:
TypeError: no se pueden leer las propiedades de nulo (leyendo 'estado')
Buscando algo similar a product.result&.message de Ruby. ¿Cómo evitar tal error en Vue y mostrar una cadena vacía en su lugar?
Hay lo mismo en TypeScript, llamado encadenamiento opcional. Consulte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
{{ product.result?.message }} O el antiguo product.result && product.result.message
Editar: el encadenamiento opcional en plantillas solo funciona en Vue3
Creo que esto es más un problema de javascript que de Vue ... puede hacer algo como esto para verificar si product.result está disponible:
{{product.result ? product.result.status : null}} o
{{ product.result && product.result.status }}