How to add multiple data types for VueJs Props?
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],
}