Version

3.0.4

Reproduction link

https://jsfiddle.net/phoenixwong/vy1h6p8r/

Steps to reproduce

Data:

{
  data () {
    return {
      valueA: false,
      valueB: true,
      valueC: null
    }
  },
  ...
}

Template:

  <ul class="list">
    <li :boolean-value="valueA">List Item A (false)</li>
    <li :boolean-value="valueB">List Item B (true)</li>
    <li :boolean-value="valueC">List Item C (null)</li>
  </ul>

What is expected?

Attribute with boolean false value will NOT be added to the <li>. The list should be rendered as --

<ul class="list">
  <li>List Item A (false)</li>
  <li boolean-value="true">List Item B (true)</li>
  <li>List Item C (null)</li>
</ul>

What is actually happening?

The boolean false value is considered as a string and added to the attribute.

<ul class="list">
  <li boolean-value="false">List Item A (false)</li>
  <li boolean-value="true">List Item B (true)</li>
  <li>List Item C (null)</li>
</ul>

In Vue v2, the "boolean-value" will not be added when the binding value is false.

This is an intended breaking change in v3: https://v3.vuejs.org/guide/migration/attribute-coercion.html#overview