Table of Contents
URL: https://www.progressiverobot.com/vuejs-property-validation/
While Vue makes it easy to add properties to your component, sometimes you need a little more control over what kinds of things are allowed into it. Thankfully, Vue provides built-in ways to add type checking, validation, default values, and constraints to your prop definitions.
Type Checking
You can easily add type checking to your property definitions by adding the <^>type<^> property to it.
For example, the following component constrains the possible input values to numbers.
[label ChildComponent.vue]
<template>
<h2>Numerical Property {{imperfectNumber}}</p>
</template>
<script>
export default {
props: {
imperfectNumber: {
type: Number
}
}
}
</script>
[label ParentComponent.vue]
<template>
<child-component :imperfectNumber="41"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
}
</script>
Allowed type values are:
- <^>Object<^> – Only allows objects, such as <^>:myProp="{key: 'value'}"<^>.
- <^>Array<^> – Only allows arrays, such as <^>:myProp="[1, 2, 3]"<^>.
- <^>Function<^> Only allows functions to be passed, such as *:myProp="function(test) { return test.toUpperCase() }".
- <^>String<^> – Only allows strings, such as <^>:myProp="'Example'"<^> (or more simply, <^>myProp="Example"<^>).
- <^>Number<^> – Only allows numerical values, such as <^>:myProp="103.4"<^>.
- <^>Boolean<^> – Only allows <^>true<^> or <^>false<^> values, such as <^>:myProp="true"<^>.
- <^>[Any Constructor Function]<^> – You can pass in classes or constructor functions as well, and it will allow props that are instances of those functions.
Default Values
You can force a property to be required by adding the <^>required: true<^> value to the property definition.
props: {
imperfectNumber: {
type: Number,
required: true
}
}
Alternatively, you can set a default value for the property, which will be used if no value is passed in.
props: {
imperfectNumber: {
type: Number,
default: 43
}
}
You can even set it to a function to generate dynamic default values!
props: {
imperfectNumber: {
type: Number,
default: () => Math.random()
}
}
Custom Validators
For more complex objects, you can also add custom <^>validator<^> functions. A validator is simply a function that takes the input property value and returns a boolean, <^>true<^> if it is valid, <^>false<^> otherwise.
props: {
imperfectNumber: {
type: Number,
validator: value => {
// Only accepts values that contain the string 'cookie-dough'.
return value.indexOf('cookie-dough') !== -1
}
}
}
By combining these properties you can robustly handle almost any values a user might throw at your component and make it considerably easier to use an understand. 😀
