Can a Vue Boolean prop be true by its presence and false by its absence?

Question

In my Vue component, I have a Boolean prop called "obj", defined like this:

obj: { Type:Boolean, default: false}

I can set it to true like this:

<my-component :obj="true"></my-component>

However, I'd like to be able to set it to true like this:

<my-component obj></my-component>

I'd like the presence of the prop to mean true and its absence to mean false. Is there a way to define a prop that works this way in a Vue component?

Answer 1

That's the behavior of a Boolean prop in any case. You simply define the prop as:

{
  props: {
    fast: Boolean
  }
  ...
}

And it defaults to false. When you specify the attribute at all in the following template, it is set to true:

<my-foo fast/>  <!-- fast is true -->

demo