Change the rule of boolean casting for props #660

rcjiang · 2024-04-11T14:53:20Z

rcjiang
Apr 11, 2024

Summary

Currently, props with boolean type have special casting rules as follows:

<MyComponent disabled /> equivalent to <MyComponent :disabled="true" /> , this's right, I really agree with it.
<MyComponent />
- If a default value is set for prop "disabled"，equivalent of passing :disabled="defaultValue"，even if the default value is undefined. This‘s OK.
- If no default value, equivalent of passing :disabled="false". This is worth discussing, I hope nothing will be done. Naturally, if the prop is optional, it‘s undefined. If not optional, an error prompt for missing prop will be received. If omit the prop and expected value is false the developer should given the default value false.

Assuming the component has a boolean type prop "disabled" ,

Basic example

This example mainly demonstrates the behavior under the current rules.

CompA.vue:

<script setup lang="ts">
const props = withDefaults(defineProps<{
  foo?: boolean
}>(), {
  foo: true,
})
</script>

<template>
  <div>{{ props.foo }}</div>
</template>

CompB.vue:

<script setup lang="ts">
import CompA from './CompA.vue';

const props = defineProps<{
  foo?: boolean
}>()
</script>

<template>
  <CompA v-bind="props" />
</template>

App.vue:

<script setup lang="ts">
import CompB from './CompB.vue';
</script>

<template>
  <!-- show false -->
  <CompB />

  <!-- show false -->
  <CompB v-bind="{}" />

  <!-- show true -->
  <CompB v-bind="{ foo: undefined }" />
  <CompB :foo="undefined" />
</template>

Motivation

The current behavior does not comply with JavaScript， as in the previous instance:
- <CompB v-bind="{}" /> not equivalent to<CompB v-bind="{ foo: undefined }" />
- <CompB /> not equivalent to<CompB :foo="undefined" />
- If change the CompB props as follows (only given the deault value "undefined"), it‘s behavior will be changed. It means
```
 const props = withDefaults(defineProps<{
   foo?: boolean
 }>(), {
   foo: undefined
 }
 // not equivalent  to
 const props = defineProps<{
   foo?: boolean
 }>()
```
Destructive impact on wrap components. As in the previous instance, we can set a default value for prop “foo“ of CompB. Considering the following scenario, this issue becomes prominent.
1. If CompA is from a UI library, I define a customized CompB by wrap it.
```
import type { CompAPropType  }  from 'library';
import { CompA  } from './CompA.vue';

const props = defineProps<CompAPropType>();
```
2. The UI library update CompA and maintain compatibility( add a optional boolean prop named "bar", set default value true)，then upgrade version.
```
<script setup lang="ts">
const props = withDefaults(defineProps<{
  foo?: boolean,
  bar?: boolean,  // add a new prop
}>(), {
  foo: true,
  bar: true,
})
</script>

<template>
  <div v-if="bar">{{ props.foo }}</div>
</template>
```
3. I update the UI library, according to its update log, no destructive changes have been made. But my app is paralyzed， and this is hard to detect.

Shyam-Chen · 2024-04-11T15:14:50Z

Shyam-Chen
Apr 11, 2024

https://vuejs.org/guide/components/props.html#boolean-casting

vuejs/vue#4792

vuejs/core#9882 (comment)

3 replies

rcjiang Apr 11, 2024
Author

Thank you very much for providing this information, but I still believe it is a topic worth discussing, so I will temporarily keep it open.
In addition, there is also a discussion about this issue.
vuejs/core#8576

matthew-dean Apr 11, 2024

It's a long-standing error in the Vue API which the core team has been reluctant to fix for backwards compatibility. It's just one of those Vue quirks that you have to know about - that Vue handles booleans incorrectly, especially when it comes to TypeScript.

Shyam-Chen Apr 12, 2024

In my case, it doesn't have any impact at the moment. I'll default to preset values for any points of concern I have.

const props = withDefaults(
  defineProps<{
    foo?: boolean;
    bar?: boolean;
    baz?: boolean;
  }>(),
  {
    foo: false,
    bar: undefined,
    baz: true,
  },
);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Change the rule of boolean casting for props #660

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Change the rule of boolean casting for props #660

Uh oh!

Uh oh!

rcjiang Apr 11, 2024

Summary

Basic example

Motivation

Replies: 1 comment · 3 replies

Uh oh!

Uh oh!

Shyam-Chen Apr 11, 2024

Uh oh!

rcjiang Apr 11, 2024 Author

Uh oh!

matthew-dean Apr 11, 2024

Uh oh!

Shyam-Chen Apr 12, 2024

rcjiang
Apr 11, 2024

Replies: 1 comment 3 replies

Shyam-Chen
Apr 11, 2024

rcjiang Apr 11, 2024
Author