NULL 값 및 '정의되지 않은' 값이 포함된 Prop 유형 검증을 사용하는 VueJ?

NULL 값 및 '정의되지 않은' 값이 포함된 Prop 유형 검증을 사용하는 VueJ?

프로포즈 검증에 관한 VueJS 2의 공식 문서에는 (코드 예의 코멘트 행으로서) 다음과 같은 내용이 기재되어 있습니다.

// 기본 유형 확인(null그리고.undefined값은 모든 유형의 검증을 통과합니다.)

이 코드 재생에 다음과 같은 에러가 발생하는데, 그 이유는 무엇입니까?

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, Boolean, got Null 

<template>
  <div>
    <h1>{{ title }}:</h1>
    <MyInput :value="null" />
  </div>
</template>

<script>
Vue.component('MyInput', Vue.extend({
  props: {
    value: {
      type: [String, Number, Boolean],
      required: true,
    },
  },
  template: `
    <select v-model="value">
      <option value="null">
        null value
      </option>
      <option value="">
        Empty value
      </option>
    </select>`,
}));

export default {
  data: () => ({
    title: 'VueJS Using Prop Type Validation With NULL and `undefined` Values?'
  }),
};
</script>

// 기본 유형 확인(null그리고.undefined값은 모든 유형의 검증을 통과합니다.)

이는 다음 경우에만 적용됩니다.required: true설정되어 있지 않습니다.코드에서는 소품이 필요하기 때문에 Vuejs가 경고를 표시하고 있습니다.

관련 설명: https://forum.vuejs.org/t/shouldnt-null-be-accepted-as-prop-value-with-any-type/63887

그 이유는required: true

API 문서에서 (상세)

필수:Boolean 프로포트가 필요한지 여부를 정의합니다.비실가동 환경에서는 이 값이 truthy이고 프로포트가 전달되지 않으면 콘솔 경고가 발생합니다.

Cato가 언급했듯이validator이 문제를 해결할 수 있습니다.

다음 명령어를 입력해야 합니다.default그리고 확실히required설정되지 않았거나 설정되지 않음false.

<script>
Vue.component('MyInput', Vue.extend({
    props: {
        value: {
            type: [String, Number, Boolean],
            default: null,
            validator: (p) => {
                return ['string', 'number', 'boolean'].indexOf(typeof p) !== -1 || p === null;
            },
        }
    }
});
</script>

이거랑 똑같아 보일 수도 있는데...

<script>
Vue.component('MyInput', Vue.extend({
    props: {
        value: {
            type: [String, Number, Boolean],
            required: false,
            default: null,
        }
    }
});
</script>

단, 두 번째 예에서는 패스할 수 있습니다.undefined첫 번째로 리스트된 타입과null.

언급URL : https://stackoverflow.com/questions/59125043/vuejs-using-prop-type-validation-with-null-and-undefined-values