Vue.js 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.

<template>
  <h2>Numerical Property {{imperfectNumber}}</p>
</template>

<script>
export default {
  props: {
    imperfectNumber: {
      type: Number
    }
  }
}
</script>

<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. :D