Your web browser is out of date. Update your browser for more security, speed and the best experience on this site.

Update your browser

May 06, 2020 • By Jake Dohm

Vue Prop Defaults and Validators

Code

Here's the code for the finished prop definition, including a default and validator.

    
      export default {
  props: {
    color: {
      type: String,
      default: 'teal',
      validator: function(value) {
        if (value === 'teal' || value === 'orange') {
          return true
        } else {
          return false
        }
      },
    },
  },
}
    
  

Bonus tip

Another 🔥 tip for you: I find myself usually writing validators for string props, so one way to simplify the validator is to create an array of allowed values and use the "includes" array method to check if the passed in value matches an allowed value. Here's how that would look for this example:

    
      export default {
  props: {
    color: {
      type: String,
      default: 'teal',
      validator: function(value) {
        const validColors = ['teal', 'orange']
        return validColors.includes(value)
      },
    },
  },
}
    
  

Further Reading

Jan 19, 2022 • By Robin Mannering

A practical example of using the Donkeytail plugin with Tailwind and Alpine JS

Overview In this article we'll explore a practical example of using the Donkeytail plugin to display points of interest (pins) on an image of a lounge, highlighting the different pieces of furniture for sale and labelling the name of each item with a short description and price. We'll use Tailwind to style each Donkeytail pin, and Alpin…

Don’t let chaotic web projects get you down.

Get a web project — and a development process — that wows.

Ready to launch better web projects?
Download our free guide:

3 Reasons Most Digital Projects Get Derailed (And Why Yours Doesn't Have To)