When setting default values for objects or arrays in Vue components, it is recommended to use a factory function (source).
For example:
foobar: {
type: Object,
default() {
return {}
}
}
// OR
foobar: {
type: Object,
default: () => ({})
}
The foobar
prop will default to an empty object {}
.
If you want to check if the prop is defined, it will always return "true". In this case, you can use the following approach:
foobar: {
type: Object,
default() {}
}
// OR
foobar: {
type: Object,
default: () => {}
}
The foobar
prop will default to undefined
.
Is the last practice considered bad form?