Default values for Vue component props & how to check if a user did not set the prop?

Default values for Vue component props & how to check if a user did not set the prop?

1. How can I set the default value for a component prop in Vue 2? For example, there is a simple movies component that can be used in this way:

Vue.component(‘movies’, {
props: [‘year’],

template: ‘#movies-template’,

}

But, if a user doesn’t specify the year:

then the component will take some default value for the year prop.
2. Also, what is the best way to check if a user did not set the prop? Is this a good way:
if (this.year != null) {
// do something
}

or maybe this:
if (!this.year) {
// do something
}

?

Solutions/Answers:

Solution 1:

Vue allows for you to specify a default prop value and type directly, by making props an object (see: https://vuejs.org/guide/components.html#Prop-Validation):

props: {
  year: {
    default: 2016,
    type: Number
  }
}

If the wrong type is passed then it throws an error and logs it in the console, here’s the fiddle:

https://jsfiddle.net/cexbqe2q/

Solution 2:

This is an old question, but regarding the second part of the question – how can you check if the user set/didn’t set a prop?

Inspecting this within the component, we have this.$options.propsData. If the prop is present here, the user has explicitly set it; default values aren’t shown.

This is useful in cases where you can’t really compare your value to its default, e.g. if the prop is a function.