Subscribe on changes!

static non-attr bindings does not work in SSR

avatar
Jan 6th 2023

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eNp9j81OwzAQhF9l8SUgNbb4u1RpVW68ARdf2mTbmMY/Wm8KKPK74yQIlSL1ODPrb8aDeAlBnnoUS1HFmkxgiMh9WGtnbPDEMADhHhLsyVso8mmhnXa1d5HBxgOsxvy2eMWu8/DmqWtuijvtKjXjMigLRhu6LWNWAFV7vx6G6XFKlcpqco0LPQN/BVxpUbdYH3f+UwswrkFGssbNgEr90sRCzCtLuw3yPXqX/zGMNP0TRC2WMDmjl9ePWouWOcSlUr0Lx4OsvVWbnCnqHRuLZePt5lE+yKdn1ZjI577EaMsd+Y+IlBu1WJzBVTZPSCVh3kxIV8subv8UXmT/SsfOpF0S6RsbbJwU

Steps to reproduce

  1. Open minimal reproduction

What is expected?

checkbox is shown in indeterminate state like in non-SSR. image

What is actually happening?

checkbox is shown in non-checked state. image

System Info

No response

Any additional comments?

<input type="checkbox" :indeterminate="true"> doesn't work as well. I think https://github.com/vuejs/core/issues/1128 is related.

I noticed this while checking whether props and attrs works differently in vue.

avatar
Jan 6th 2023

A checkbox cannot be set to indeterminate state by an HTML attribute - it must be set by a JavaScript. https://www.w3schools.com/jsref/prop_checkbox_indeterminate.asp

So ab immediate workaround would be to write a custom directive for this.

We can look into wether this warrants special handling in hydration.