Subscribe on changes!

:attr="false" removes the attr in Vue3

avatar
Feb 16th 2023

Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9jtFOwzAMRX8l8vOaSICEVBU0/iMv3Wog0CSW7YyHqf+OOxAam7S33HMdHx/hhcgfGkIPg+w5kTpBbfQcyxB+gD0tKGaaR0VLzg2pUFPXT0nG3YzTU4TXcRaMcPr3NwsbSJkqa5dH8h9Si3mO64b4W0iE3p3IyuyQNUd4VyXpQ2iFPt/8vuawtS5wK5oydlPN23t/5x8eg52g59yj5G7H9UuQzRhhc7Y8GDwgd4xlQka+KbuY/Se86K6kq3OJZYHlG+CGeuk=

Steps to reproduce

  1. Create an input element with :disabled attribute.
  2. pass boolean value false to the :disabled attribute.
  3. Contrary to the documentation, it removes the disabled attribute from the element. It behaves like Vue2.

What is expected?

it does not removes the attribute when the passed value is false as the documentation says.

What is actually happening?

It removes the attribute even if the passed value is false.

System Info

System:
    OS: macOS 13.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 33.85 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.19 - ~/.nodebrew/current/bin/yarn
    npm: 8.19.3 - ~/.nodebrew/current/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Chrome Canary: 112.0.5598.0
    Edge: 110.0.1587.41
    Firefox: 109.0
    Safari: 16.2
  npmPackages:
    vue: ^3.2.45 => 3.2.47

Any additional comments?

No response

avatar
Feb 16th 2023

disabled is a known boolean attribute for <input>. The breaking change described in the docs only affects non-boolean attributes.

Coercion for boolean attributes is left untouched.

avatar
Feb 16th 2023

I see now thanks @Justineo, but I think this flag and its description may be somewhat misleading. In fact, the ATTR_FALSE_VALUE flags appeared even for boolean attributes.