I'm building a vuejs ponent which accepts a prop by the name of idFieldType

Now I want this prop to accept only a Number Type or a String Type

So I wrote it as follows

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

         return false;    
    }
}

I also tried replacing the type to Object.

My question is how can I write a prop that accepts only specific types ?

I'm building a vuejs ponent which accepts a prop by the name of idFieldType

Now I want this prop to accept only a Number Type or a String Type

So I wrote it as follows

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

         return false;    
    }
}

I also tried replacing the type to Object.

My question is how can I write a prop that accepts only specific types ?

• javascript
• vue.js
• vuejs2
• vue-ponent

• you can. try typeOf – rashidnk Commented Aug 5, 2017 at 10:12
• Maybe I didn't get your question correctly, but if you want one prop to be either Number or String, why not use my-prop: [String, Number]? – choasia Commented Aug 5, 2017 at 10:59
• cos I don't want the value to be a string or number, I want the value to be the Type String or Number :) – Storm Commented Aug 7, 2017 at 8:37
• It seems Narek-T answered your question, yet you didn't pick it as the top answer. – Pedro Amaral Couto Commented Jul 15, 2020 at 21:38

2 Answers 2

Vue.JS has built in props validation, you can set type, required or not, default value... For example:

Vue.ponent('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
      }
    }
  }
})

note, that Vue.js also accepts multiple possible types propB: [String, Number],, that's what you need. And you can read more about that in official wiki

Ok, found the solution..

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

                    return false;
                }
            }

The problem was that when specifying type as Function the default expects a function, I was returning a function returning a function :)