Subscribe on changes!

Passing boolean value to render function children renders empty node instead

avatar
Jan 26th 2023

Vue version

3.2.26

Link to minimal reproduction

https://stackblitz.com/edit/vue-baopmh?file=src%2FApp.js

Steps to reproduce

  • According to the docs, Children can be any of string, number, boolean, etc
  • Supply a boolean value as the children for the render function

What is expected?

It will render the boolean value in the template (e.g. true or false) regardless of the boolean value

What is actually happening?

It renders empty node instead

System Info

https://stackblitz.com/edit/vue-baopmh?file=src%2FApp.js

Seems to be reproducible regardless of the system

Any additional comments?

For context, the component that we're using simply renders the value it is given, and one of them represents a boolean value to be displayed in the UI. Technically we could've always parsed them to string first, but since the docs says boolean is allowed, we'd expect to see them rendered.

avatar
Jan 26th 2023

It seems that boolean is being skipped when rendering:

https://github.com/vuejs/vue/blob/d52fbff7a77d8d9c032a74a21c34e2c122add5d9/src/core/vdom/helpers/normalize-children.ts#L56

So now my question is whether the docs is trying to say that boolean value is allowed but an empty node will be rendered instead, or boolean value is allowed and it's supposed to be rendering a stringified version of the boolean value (true or false) which isn't the case.

avatar
Jan 27th 2023

seems it works only in template that the compiler will wrap booleans with toDisplayString.

Check JS on the right: Vue SFC playrgound

avatar
Feb 2nd 2023

see https://github.com/vuejs/core/issues/574 I feel the docs should be updated. @LinusBorg WDYT