Null is not treated as Object in component prop check

[fnlctrl]

I have a component that let's user select an object from an array.

<comp :selected.sync="selectedObject">
// parent data
data: {
    selectedObject: null
}
// comp prop
props: {
    selected: {twoWay: true, type: Object}
}

and in parent template I have something like

<div v-if="selectedObject"> blah blah blah </div>
<div v-else> please select an object </div>

which displays different content based on whether an object is selected.

and I get

[Vue warn]: Invalid prop: type check failed for selected="selectedObject". Expected Object, got Null.

I know i can just remove the "type: Object" check and suppress the warning,
but wouldn't it be better if component props checks treat null as an object?

Because javascript does that (typeof null === 'object'),
and setting null as an initial value (to my knowledge) doesn't affect mutation observation.

[yyx990803]

It fails because null is not an Object... the typeof behavior is commonly considered a bad design in the JavaScript language itself.

Just initialize it to an empty object.

[fnlctrl]

Initializing with an {} will cause it to evaluate to true.. which means I won't be able to use v-if="selectedObject" and I'll have to create another variable to store whether an object is selected.
I'll just remove the type check then..

[lsbyerley]

@fnlctrl you just need to change it to v-if="Object.keys(selectedObj).length > 0"

[dulowski-marek]

@fnlctrl Which is a workaround, where either using such an exaggerated expression in template or writing a getter for each object to check if it is initialized seems not right.

Using Typescript with Vue complicates this even more, as one has to denote all objects as Partial<T> or T | {} for this approach to work.

What is the status of this issue in upcoming 3.0 release?

[christhofer]

So, this any type in documentation is not actually any type?

[Flamenco]

When using Typescript, I have no way to specify string | null.

My use-case is a filter that sets the value to null when cleared.
I know the workaround is to transform the null value to a string
before sending the prop to the component, but I should not have to do that.

Ideally, one of these would be the syntax:

{type: [Null,String] as () => string | null}
{type: Any as () => string | null}
{type: [Object,String] as () => string | null} // with null considered an object

Dead Ends

// This will not work because 'Null' is not a type
{type: [Null,String] as () => string | null}

// This will not work because 'Any' is not a type
{type: Any as () => string | null}

// This will not work because null is not considered an Object, although is should be
{type: [Object,String] as () => string | null}

// This will not work because string is not considered an Object
{type: Object as () => string | null}

So I end up doing this, and the Typescript value is now undefined instead of string | null

{
     validator: prop => typeof prop === 'string' || prop === null,
     required: true,
}

[dimitor115]

@Flamenco
I am using some kind of workaround:

props: {
    status: {
      type: String as PropType<SomeType | null>,
      default: null
    }
  }

The typescript compiler understand this.status as SomeType or null however vue doen't have problems with passing null via prop.

[Volmarg]

Sadly this problem still exists. What's more annoying is the error saying. got Null (first letter is uppercase) but there is only null.

[mspoulsen]

I think the key here is to use a default value of null:

foo: {
      type: (Object as () => Foo) || null,
      default: null,
    },

This works for me. If I use "required" instead of "default" I get the error mentioned above.

[GordonSo]

Exactly as @dimitor115 and @mspoulsen said.
Also removing the required: true setting is necessary which they already implied in their answers.

[rgrignon1]

I don't know why is this issue closed and have never been reopened since it has never been fixed.

Setting a default value as null is not the same as explicitly requiring a value that could still be null. Forcing a default value and removing the required param setting is a weak workaround at best and at worst it just doesn't work at all, especially without typescript.

It's a great issue when you need a dynamic prop that is updated often and could be set to null, like a selection component, which is a pretty common use case that has been mentioned by others and is also mine.

[plehnen]

vuejs/core#3948