How to add multiple data types for VueJs Props?

Question

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

Answer 1

Here is the solution I found.

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

Answer 2

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>