Change the rule of boolean casting for props

[rcjiang]

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

1. 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
      }>()

2. 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]

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

vuejs/vue#4792

vuejs/core#9882 (comment)

[rcjiang]

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]

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]

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,
  },
);