Vue JS — Props Validator

I recently started to work on vue js and I came across the custom validation for the props in components. To give a brief about props, you can pass data to child component with the help of props. For example ,

Above code snippet is a component ‘blog-post’ takes property ‘title’ and renders it in the template. You can pass data to this component

Note: A component can have any number of props. For example

Now that we know that we can have more props but we are not sure what data they can hold, to make them more descriptive we can have the below properties

  • type
  • required
  • default
  • validator

In the above example, we can see that the properties name and their type are defined. This gives us more clarity on what data type the props holds.

By default, props are optional, but you can make them mandatory by adding required and also it is advised to have default value for required props to handle fail over case.

Note, if you specify default value to a property, it automatically means its required:true

We can further add validation to our property, to make sure that, you props get the right data

This validator will now check whether the number is between 0 to 100, if not it will give false which will make the validator to fail. By this we can add validations to our props too.

That was an easy validation, lets see how can we validate an Array.

Lets assume we have a property called cars which will takes array of objects (car), we need to validate that every car object passed has color and brand_name as attributes,

In above code, we check that every car object holds brand_name and color attributes in them. By this we can be more sure that our car that we will be rendering in html will have these mandatory values.

How about some unit test for the above code, I use Jest for unit testing my vue components, here you find the unit test for the above code snippet

By this, You can be more sure about the props you define in a component.

Happy Coding!!

--

--

--

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Thanks for this Rui! I've never thought of using lists this way! What a great idea! 😉

News app using Account kit, Ads kit, and Push kit with HMS Core

Async Await in a loop

This is title markdown 2

Image of Add to Inventory Interface

Ultimate Vim TypeScript Setup

Send Files With HTML5's Form and Catching with Express.js Handlebars Templating

Next.JS vs. Gatsby.JS Frameworks- All You Need To Know

Add “Updated At” To Your Gatsby Blog

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Santhoshkumar Ravi

Santhoshkumar Ravi

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

More from Medium

Create multilingual web app using VueJS 2 + vue 18n

Vue I18n translations in multiple files

Calculator in Vue.js along with Tailwind CSS

How to filter todo items? Vue 3 Composition API