Vue3 Boolean Casting

[StudentWvl]

If there is a component < MyComponent > that contains a Boolean prop disabled.
Then < MyComponent disabled="false" > will bind attr in this way and resolve to true in the component?
Is this normal?

[Shyam-Chen]

type Booleanish = boolean | 'true' | 'false';

<input disabled="false" />

[hubdidub]

I'm not 100% sure what you mean, but this code:

<MyComponent disabled="false">

will never resolve the prop value as true. It will be a string with the value "false". I assume you are mistaken that for the boolean true because it's truthy. See this example:

if ("false") {
  // this will run, because it's a string, not the boolean false
}

---

If you have specified a type for your prop, meaning it's defined like this:

defineProps({
  disabled: Boolean
});

then you should see a warning from Vue in the console:

Invalid prop: type check failed for prop "disabled". Expected Boolean, got String with value "false".

which should give a hint on what's going on.
To fix it, you should write it like so:

<MyComponent :disabled="false">

(note the colon before disabled)

You can read the guide on Props for more info.
And you can use this Playground to see how Boolean props behave with different values.