Make required property accept null, but not undefined with Vue.js

Question

I'd like to accept objects and null (Vue.js checks for null values for objects, even though typeof null === 'object') in one of my components, but I want to make the validation fail for undefined values.

What I have tried (using vue-property-decorator)

@Prop({ required: true, type: Object, validator: v => typeof v === 'object' })
@Prop({ required: true, validator: v => typeof v === 'object' })
// I got an error:
//> Expected Object, got Null.

@Prop({ validator: v => typeof v === 'object' })
// Let's undefined through, so when I don't specify the prop, I get no warnings
// making the validator useless for my purposes

How can I accept objects (including null) as a property while making sure that the developer using my component receives a warning if the value is undefined (which happens when the prop is omitted)?

tony19 · Accepted Answer · 2022-07-15 20:46:52Z

8

From the documentation on props validation

Basic type check (null matches any type)

After checking the source, the basic types are defined with the following regex.

const simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/

So type: Object, is incorrect. You could remove the type prop check, keeping the required and custom validator checks.

@Prop({ 
    required: true,
    validator: v => typeof v === 'object',
})

If you just want to ensure that the prop is at least set to null, you could just remove the required check and add a simple default: null.

@Prop({ 
    type: Object,
    default: null,
})

Your reference to Vue isObject utils is not used in the type check. It uses isPlainObject.

Which can distinguish null by doing the equivalent of:

Object.prototype.toString.call(null)
// => "[object Null]"

edited Jul 15, 2022 at 20:46

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 4, 2018 at 14:05

Emile Bergeron

17.5k5 gold badges85 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Make required property accept null, but not undefined with Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related