반응형
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
반응형
'programing' 카테고리의 다른 글
[Vue.js] Vuex에서의 네임스페이스 (0) | 2022.06.04 |
---|---|
C에서 _start()의 용도는 무엇입니까? (0) | 2022.06.04 |
vue.js의 하위 컴포넌트에 전달된 소품의 로컬 복사본을 작성하시겠습니까? (0) | 2022.06.04 |
vee-dismit 어떻게 두 숫자 사이에 자리 제한을 설정할 수 있습니까? (0) | 2022.06.04 |
트랩 표현 (0) | 2022.06.04 |