开发者问题收集

管理对象的未定义值

2021-04-30
134
vue.js vuejs3

我正在使用 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 warn]: Error in render: "TypeError: Cannot read property 'value' of undefined"

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

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

但我仍然收到相同的错误。我该如何处理？

2个回答

问题是 results.object 可能 未定义 ，因此您应该在尝试访问子属性之前验证它是否存在。您可以通过使用 <template v-if="results.object"> 包装两个 img 元素轻松完成此操作。并且您可以使用 <img v-else> 显示后备 img ，与此 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=""
/>
tony19
2021-04-30

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

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=""
    />
jeremy302
2021-04-30