Skip to content

Null boolean props if not given in Vue?

In a Vue component, I have this:

props: {
    foo: Boolean
}, 
mounted() {
    console.log(this.foo) 
}

If I call my component without foo:

<component/>

I read false on the console. I would like to get null if the property is not given and the boolean value elsewhere.

How can I get this?

Answer

You could add default value :

props: {
    foo: {
      type:Boolean,
       default: null
    }
},