管理对象的未定义值答案

【问题标题】：Manage undefined value of an object管理对象的未定义值
【发布时间】：2021-04-30 02:52:34
【问题描述】：

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

所以我有类似的东西：

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

所以这可以正常工作，但有时 results.object.value 是 undefined 并且它会在控制台中引发错误：

[Vue 警告]：渲染错误：“TypeError：无法读取属性‘值’ 未定义”

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

<img
  v-else-if="!results.object.value"
  src="@/assets/images/services/test3.svg"
  class="w-40"
  alt=""
/>

但我仍然遇到同样的错误。我该如何管理它？

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

问题是results.object 可能是undefined，因此您应该在尝试访问子属性之前验证它是否存在。您可以通过使用<template v-if="results.object"> 包装两个img 元素来轻松做到这一点。您可以显示一个备用img，使用<img v-else>，与此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=""
/>

【讨论】：

在包装元素（template、div、section 等）上使用 v-else 而不是 img。

【解决方案2】：

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

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

或

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

【讨论】：

但是当值未定义时我想显示另一个图像
你仍然使用可选链。检查编辑
我试过但我得到错误：SyntaxError: Unexpected token when I use !results?.object?.value
试试！(results && results.object && result.object.value)