programing

Vue js - 특정 유형으로 프로펠러 정의

prostudy 2022. 6. 4. 08:10
반응형

Vue js - 특정 유형으로 프로펠러 정의

idFieldType이라는 이름의 소품을 받아들이는 vuejs 컴포넌트를 구축하고 있습니다.

이제 이 소품에는 숫자 유형 또는 문자열 유형만 허용됩니다.

그래서 이렇게 썼습니다.

idFieldType: {
    Type: Function,
    default: function() {
        return Number;
    },
    validator: function() {
         if(value == String || value == Number) {
               return true;
         }

         return false;    
    }
}

오브젝트로의 치환도 시도했습니다.

제 질문은 어떻게 특정 유형만 받아들이는 소품을 쓸 수 있는가 하는 것입니다.

Vue.JS에는 소품 검증 기능이 내장되어 있어 유형, 필수 여부, 기본값 등을 설정할 수 있습니다.예를 들어 다음과 같습니다.

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

주의: Vue.js는 가능한 여러 유형도 받아들입니다.propB: [String, Number],그게 네게 필요한 거야자세한 내용은 공식 Wiki에서 보실 수 있습니다.

좋아요, 해결책을 찾았어요..

idFieldType: {
                type: Function,
                default: Number,
                validator: function (value) {
                    if (value() == String || value() == Number) {
                        return true;
                    }

                    return false;
                }
            }

문제는 타입을 Function으로 지정하면 디폴트에서는 함수가 예기되어 함수를 반환하고 있었다는 것입니다.

언급URL : https://stackoverflow.com/questions/45520700/vue-js-define-prop-as-a-specific-type

반응형