Is it possible to pass a null prop? I have defined a master ponent which takes user prop.

<div id="app">
    <master :user="{{ $user }}"></master>
</div>

Prop is defined like this:

props   : {
    user: {
        type: Object
    }
},

Now inside the controller I am passing user variable if user is authenticated, otherwise I am passing null:

public function index()
{
    $user = Auth::check() ? Auth::user() : null;
    return view('master', pact('user'));
}

I am getting an issue that The value for a v-bind expression cannot be empty. I couldn't make it even if I remove the colon so that it doesn't bind. I also tried explicitly setting that prop is not required, but none of that worked.

Can this be resolved somehow so that I pass a null/empty object to Vue?

Is it possible to pass a null prop? I have defined a master ponent which takes user prop.

<div id="app">
    <master :user="{{ $user }}"></master>
</div>

Prop is defined like this:

props   : {
    user: {
        type: Object
    }
},

Now inside the controller I am passing user variable if user is authenticated, otherwise I am passing null:

public function index()
{
    $user = Auth::check() ? Auth::user() : null;
    return view('master', pact('user'));
}

I am getting an issue that The value for a v-bind expression cannot be empty. I couldn't make it even if I remove the colon so that it doesn't bind. I also tried explicitly setting that prop is not required, but none of that worked.

Can this be resolved somehow so that I pass a null/empty object to Vue?

• javascript
• laravel
• vue.js
• vuejs2
• vue-router

• Try setting required property for props to false. That should work out. – Dhaval Chheda Commented May 12, 2020 at 9:21

3 Answers 3

In JS null is actually of type object. But the prop check of Vue does not consider null to be an object, see here.

Anyway, if $user is null, {{ $user }} is converted to nothing so you end up with

<master :user=""></master>

Which is an empty string.

You could either not specify the type, like this:

props   : ['user'],

or if you want to, specify the type as string or Object:

props   : {
    user: {
        type: [Object, String]
    }
},

or you create an empty object if $user is null:

<master :user="{{ $user ?? '{}' }}"></master>

Although the accepted answer gives a solution, I think the exact requirement can be easily achieved by using PHP Null Coalescing Operator and VUE Multiple Prop Types

For example:

VUE ponent prop updated to accept both Object and null type

props: {
    user: {
        type: [Object, null]
    }
},

Then in the blade file

<div id="app">
    <master :user="{{ Auth::user() ?? 'null' }}"></master>
</div>

You can use null as default value. I usually do this.

props: {
    user: {
        type: Object,
        default: null,
    }
},

The downside is, when user is changed from null to object, you can't change it back to null.

What I do when I need the clear the object, I use empty object and make it as default.

props: {
    user: {
        type: Object,
        default: () => {},
    }
},