Tutorial

Vue.js Property Validation

Published on January 30, 2017
Default avatar

By Joshua Bemenderfer

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel