How to add multiple data types for VueJs Props?

This error got me when passing different values to the component.

enter image description here


Here is the solution I found.

props: {
   value: [Number, String, Array]
}

The syntax with a pipe (Number | String), like proposed in the accepted answer, does not actually work. Here is a more detailed solution with examples:

Type-Check, Not Required Prop

Use of the following syntax to type check a prop:

props: {
  username: {
    type: [ String, Number ]
  }
}

Here is a live example of a property with type check:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('test-component', {
  name: 'TestComponent',
  props: {
    username: {
      type: [ String, Number ]
    }
  },
  template: `<div>username: {{ username }}</div>`
});

new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <!-- valid: String -->
  <test-component :username="'user 38'"></test-component>
  
  <!-- valid: Number -->
  <test-component :username="59"></test-component>
  
  <!-- valid: null is valid, it is not required -->
  <test-component :username="null"></test-component>

  <!-- valid: missing property is valid, it is not required -->
  <test-component></test-component>

  <!-- invalid: Array -->
  <test-component :username="['test', 456]"></test-component>
</div>

Type-Check, Required Prop & Custom Validator

Use the following syntax to type check a required property together with a custom validator.

props: {
  username: {
    type: [ String, Number ],
    required: true, // optional
    validator: item => item !== '123' // optional
  }
}

Here is a live example of a required property together with a custom validator:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('test-component', {
  name: 'TestComponent',
  props: {
    username: {
      type: [ String, Number ],
      required: true,
      validator: item => item !== '123'
    }
  },
  template: `<div>username: {{ username }}</div>`
});

new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <!-- valid: String -->
  <test-component :username="'user 38'"></test-component>
  
  <!-- valid: Number -->
  <test-component :username="59"></test-component>
  
  <!-- invalid: Array -->
  <test-component :username="['test', 456]"></test-component>
  
  <!-- invalid: String, but disallowed by custom validator -->
  <test-component :username="'123'"></test-component>
  
  <!-- invalid: null property, it is required though -->
  <test-component :username="null"></test-component>

  <!-- invalid: missing required prop -->
  <test-component></test-component>
</div>

In general props listed as an array of strings, if you don't have any headache of type:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

If you want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties’ names and values contain the prop names and types, respectively:

props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object
}

If you want to use multiple type then as follows:

props: {
    value: [String, Number],
}