Vue.js 管理对象的未定义值

我使用的是Vue 3，我想根据对象的值显示图像

所以我有点像：

因此，这可以正常工作，但有时results.object.value是

未定义的

，它会在控制台中抛出一个错误：

[Vue warn]：呈现时出错：“TypeError:无法读取属性“value” “未定义的”

因此，如果值未定义，我尝试添加另一个v-if以显示其他图像：

---

但我还是犯了同样的错误。如何管理它？

您可以使用可选链接，如：

results?.object?.value??'default'==='test'

或

just results？.object？.value=='test'

问题在于

结果。对象

可能未定义，因此您应该在尝试访问子属性之前验证它是否存在。通过使用

包装

img

两个元素，您可以很容易地做到这一点。您可以使用

但我想在值未定义时显示另一个图像您仍然使用可选链接。检查editI已尝试，但出现错误：SyntaxError:使用

时出现意外标记！结果？.object？.value

try！（results&&results.object&&result.object.value）我在包装器元素（一个

模板

，

div

，

节

，等等）上使用

v-else

，而不是

img

，获得原始错误。

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=""
    />