如果 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 来实现我想要的东西—或者有更好的方法来处理这个问题吗？

原文由 Kid Diamond 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会根据 src 道具值创建一个计算属性，如果 src 是 null :53a— 则返回默认值

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

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

原文由 thanksd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果 src 是 null 你也可以显式传递 undefined 作为 prop — 并且你宁愿希望组件处理默认值

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

原文由 nomadoda 发布，翻译遵循 CC BY-SA 4.0 许可协议