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:
<movies year="2016"><movies>
Vue.component('movies', {
props: ['year'],
template: '#movies-template',
...
}
But, if a user doesn't specify the year:
<movies></movies>
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
}
?
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/
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.
this.$options.propsData is removed in Vue 3. Is there another way to check if a prop has been explicitly passed in?
Also something important to add here, in order to set default values for arrays and objects we must use the default function for props:
propE: {
type: Object,
// Object or array defaults must be returned from
// a factory function
default: function () {
return { message: 'hello' }
}
},
Worth mentioning, that you also can add a custom validator function to every prop like this, to ensure the passed value matches your components specific requirements:
props: {
year: {
type: Number,
required: true
validator (value) {
return value > 2015
}
}
}
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How do I check for null values in JavaScript?
- For..In loops in JavaScript - key value pairs
- Is Safari on iOS 6 caching $.ajax results?
- Call a Vue.js component method from outside the component
- vuejs update parent data from child component
- Vue 2 - How to set default type of array in props
- Merge Vue props with default values
- Vue.js - How to properly watch for nested data
if (this.year != null)or maybe this:if (!this.year)or? Thanks!null. If that is what you need to perform some other logicif (this.year != null)orif (!this.year)is the way to go.