prop 인수가 null인 경우 기본값 사용

prop 인수가 null인 경우 기본값 사용

다음과 같은 간단한 아바타 컴포넌트가 있습니다.

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

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

API에서 사용자 데이터를 가져왔는데 아바타 URL이 없다고 가정해 보겠습니다.이 경우 이 컴포넌트가 기본값을 사용하도록 하고 싶지만 통과할 때만 작동합니다.undefined하지만undefinedJSON에서는 유효하지 않기 때문에 API 응답에서 반환할 수 없습니다.

내가 무엇을 원하는지 알 수 있는 방법은 없을까?null아니면 이걸 해결할 더 좋은 방법이 없을까?

나는 다음 정보를 바탕으로 계산된 속성을 만들 것이다.src이 경우 기본값을 반환하는 값을 제안합니다.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>

또한 명시적으로 합격할 수도 있습니다.undefined을 지지하다src이null컴포넌트가 기본값을 처리하는 것이 좋습니다.

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

이렇게 하면 효과가 있습니다.

<template>
  <img :src="src || '/static/avatar-default.png'">
</template>

개인적으로는 null 값을 디폴트 값으로 강제하는 것 외에 프로포트의 디폴트 값을 유지합니다.

제가 알기로는 소품 정의로는 원하는 것을 이룰 수 없습니다.

언급URL : https://stackoverflow.com/questions/48195282/use-default-value-if-prop-argument-is-null