// Tutorial //

Vue.js Property Validation

Published on January 30, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
Vue.js Property Validation

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

ChildComponent.vue
<template>
  <h2>Numerical Property {{imperfectNumber}}</p>
</template>

<script>
export default {
  props: {
    imperfectNumber: {
      type: Number
    }
  }
}
</script>
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. :D


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!