Manage undefined value of an object - vue.js

Question

I'm using Vue 3 and I want to show an image depending on the value of an object
So I have something like:
<img
v-if="results.object.value === 'test'"
src="#/assets/images/services/img.svg"
class="w-60"
alt=""
/>
<img
v-else-if="results.object.value === 'test2'"
src="#/assets/images/services/img2.svg"
class="w-80"
alt=""
/>
So this works correctly but sometimes the results.object.value is undefined and it throws an error in the console:
[Vue warn]: Error in render: "TypeError: Cannot read property 'value'
of undefined"
So I try to add another v-if to show other image if the value is undefined:
<img
v-else-if="!results.object.value"
src="#/assets/images/services/test3.svg"
class="w-40"
alt=""
/>
But I still get the same error. How can I manage it?

Answer 1

The problem is results.object is possibly undefined, so you should verify it exists before trying to access a subproperty. You could do this easily by wrapping both img elements with a <template v-if="results.object">. And you could show a fallback img, using an <img v-else>, adjacent to this template:
<template v-if="results.object">
<img
v-if="results.object.value === 'test'"
src="#/assets/images/services/img.svg"
class="w-60"
alt=""
/>
<img
v-else-if="results.object.value === 'test2'"
src="#/assets/images/services/img2.svg"
class="w-80"
alt=""
/>
</template>
<!-- show fallback img if no `results.object` -->
<img
v-else
src="#/assets/images/services/test3.svg"
class="w-80"
alt=""
/>

Answer 2

You can use optional chaining like:
results?.object?.value??'default'==='test'
or
just results?.object?.value === 'test'
<img
v-if="results?.object?.value === 'test'"
src="#/assets/images/services/img.svg"
class="w-60"
alt=""
/>
<img
v-else-if="results?.object?.value === 'test2'"
src="#/assets/images/services/img2.svg"
class="w-80"
alt=""
/>
<img
v-else-if="!results?.object?.value"
src="#/assets/images/services/test3.svg"
class="w-40"
alt=""
/>