vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.75k stars 8.35k forks source link

Style binding is wrong when the property evaluates to false and using nextTick() #12368

Open dsine-de opened 1 week ago

dsine-de commented 1 week ago

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNp9VE1v2zAM/SucCqwJkCbFtpPb7qvoYTtsxVbs5Iti07ZaWRIk2U0R5L+PkmwnS7v6Zn48Pj5S3LIvxiz7DlnGLj22RnKPH3MFcFmKHkR5lbNCK8+FQpsz+FxIUTyQ0eu6lpizGAtwHczQcFVKigvpK8rfA/VnoqIs4f4IJ9YhMWF7raUXhn4z559kKg1wN5gPgC5XB/To1xVWGA8OfWfIIlqjrYetxWoHldUtnFJXpxd7j8KNvyOWR+5cUX+OgEJ5uAICmG13c/Ik+0R58FVcOgzuXEn0wKVHq4jVrXbCC60oLIbECO6eVAFVp4roSqLN5rANnU3Iy57LLuC/OTJFDIDVij9y4WHsYDa/IBs8NkiQjXAgaToEB1RHty0qj+WCPEgFo47gdItetOiSvMcfgTXcgbHaoPUCXZJorX0zNSh6BDP06BYglrgkeANvQ5in6Cjg/wtgH9nqrm4itaT3QUkMLZOQhAo5ixrmLAkQYyeVnkv+KQkKILHyGZwv0p8VdUO/EWowEeO9PxEfAoJpB9m/SIepA9qYHJEO/SPaeUQaRicqmB1Pdf7i0rx5ZiSIXdj7tOnD1g+PhN7EyfQuE+c1Lx5qqztVnhVaapvBSVmWBAJgeFkKVWfw7txsEmyCGPcjAozTzYCvnZadD/v3PPmlShaHQlrQ8tmzMGzvMlBaBZDUxkCdLZh3xL0S9fLeaUWXJ5YPh6Y1gu7HTxOXLGfTNHLGpdSP36PN227UnHIaLB5esN+7TbDl7NaiQ9vTLk0+z22NPrlvfv+gV3XgbHXZhfv0ivMXRnmIYwr7SkqEs7ePi2y/xcND0t25m41H5camAtG4JDE+Z3SJrl9pfU/3/fJDzCNF2e4vmmjuJQ==

Steps to reproduce

  1. Open the SFC Playground reproduction link
  2. When clicking the "Click handler" div, a red tooltip shows on the top left of the viewport.
  3. When clicking again, the tooltip is being hidden. On the next click, it alternates its position and shows on the bottom right of the viewport.
  4. Now when the comment in the code is uncommented so the function uses nextTick() and then clicking again a few times on the "Click handler" div, the style properties that evaluate to false also get applied. The style binding includes the styles that evaluate to false - this doesn't happen without nextTick().

What is expected?

This could be expected behaviour but style properties that evaluate to Boolean false should not be applied to the element. This is correct when not using the await nextTick() line in the reproduction link.

What is actually happening?

When using nextTick(), styles that evaluate to Boolean false still are applied to the element and are not being unset.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
    Memory: 19.70 GB / 31.87 GB
  Binaries:
    Node: 23.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    vue: ^3.5.12 => 3.5.12

Any additional comments?

The documentation at https://vuejs.org/guide/essentials/class-and-style does not clearly state what happens to style bindings that have properties of type Boolean false, but class bindings that evaluate to false are not being rendered.

Anyway the behaviour seems to be inconsistend depending on the usage of nextTick().