如果prop参数为null,则使用默认值

Question

我有这个简化的头像组件:

<template>
  <img :src="src">
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    src: {
      type: String,
      default: '/static/avatar-default.png'
    }
  }
}
</script>

假设我从我的API中获取一些用户数据,但它不包含头像URL.在这种情况下,我希望此组件使用默认值,但它只在传递undefined给它时才起作用,但undefined在JSON中无效,所以我无法从API响应中返回它.

有没有办法通过传入实现我想要的东西null或有更好的方法来处理这个？

Answer 1

我会根据srcprop值创建一个计算属性,如果src是,则返回默认值null:

<template>
  <img :src="source">
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    src: { type: String }
  },
  computed: {
    source() {
      return this.src || '/static/avatar-default.png';
    }
  }
}
</script>

Answer 2

undefined如果src是null，您也可以显式地作为 prop传递，并且您希望组件处理默认值。

<template>
   <img :src="src || undefined">
</template>