Adjust the Vue.js required property to allow null values but not undefined

Question

Adjust the Vue.js required property to allow null values but not undefined

I need my component to accept both objects and null values, as Vue.js considers null as an object. However, I want the validation to fail if the value is undefined.

Here's what I've attempted using vue-property-decorator:

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

@Prop({ validator: v => typeof v === 'object' })
// Allows undefined values to pass through, rendering the validator ineffective for my needs

Is there a way to allow objects (including null) as a property while ensuring that the developer receives a warning if the value is undefined (such as when the prop is not specified)?

javascript vue.js vue-component

Answer 1

Answer №1

According to the documentation regarding validation of props

Basic type check (null will match any type)

Upon inspecting the source code, the basic types are determined using the following regular expression.

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

Hence, specifying type: Object, is deemed incorrect. In this case, you could omit the type prop validation and only retain the checks for required and a custom validator.

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

If your intention is to simply ensure that the prop is at least set to null, you may eliminate the required check and include a basic default: null instead.

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

Your mention of Vue's isObject utility function is not used in the type validation process. Instead, it makes use of isPlainObject.

This function can differentiate null by performing the following equivalence test:

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

Answer 2

According to the documentation regarding validation of props

Basic type check (null will match any type)

Upon inspecting the source code, the basic types are determined using the following regular expression.

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

Hence, specifying type: Object, is deemed incorrect. In this case, you could omit the type prop validation and only retain the checks for required and a custom validator.

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

If your intention is to simply ensure that the prop is at least set to null, you may eliminate the required check and include a basic default: null instead.

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

Your mention of Vue's isObject utility function is not used in the type validation process. Instead, it makes use of isPlainObject.

This function can differentiate null by performing the following equivalence test:

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

Adjust the Vue.js required property to allow null values but not undefined

Answer №1

Similar questions

Guide to Binding a JSON Property (Set or Array) to an Interactive Input Form in AngularJS

Encountering a TypeError with Arg 1 while trying to execute the save method in jsPDF

The jQuery UI Dialog is experiencing an issue with a button that is triggering a HierarchyRequest

The feature of determining if an edge exists, within the dagre-d3/graphlib,

Developing a RESTful API using NodeJS that interacts with Python to handle JSON data and trigger

Is there a way for me to achieve a vertical page turning effect on a single page?

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

Steps for making a webpack-bundled function accessible globally

Resolve issues with vue js checkbox filtering

Uploading CouchDB document attachments using an HTML form and jQuery functionality

The transition between backgrounds is malfunctioning

Merge JSON objects into an array

encountering an issue with server-side rendering of React causing an error

Retrieving information from MongoDB for a specific ObjectID associated with the current authenticated user

What is the best method for inserting a URL link using jQuery within a CSS element?

Blip Scripts: Converting JSON to JavaScript - Dealing with Undefined Arrays

What is the best way to transmit a Blob object to the server without it arriving empty?

The issue with Extjs store.proxy.extraParams being undefined appears to only occur in Internet Explorer

How can we accurately identify the server that initiated an AJAX call in a secure manner?

VueJS is unable to compile the project until the linting errors are resolved