Style binding: implicitly assign 'px' as the default unit for numeric values for certain css properties

What problem does this feature solve?

When assigning values to a CSS property via style binding like

    <div class="d-inline-block" :style="{width : width}"></div>

or using the shorthand syntax…

    <div class="d-inline-block" :style="{width}"></div>

this will actually not gonna work because we need to explicitly set the unit:

    <div class="d-inline-block" :style="{width : width + 'px'}"></div>

or via interpolation…

    <div class="d-inline-block" :style="{width : `${width}px`}"></div>

Now our code becomes more verbose. Combining all the number of occurrences of such binding, it’s becoming ridiculous.

I’m not sure if currently there is an elegant solution for this, but if there is. It would be also good if it is referenced in in the docs.

In React, this is the default behavior. It will add ‘px’ if the unit is not specified.

What does the proposed API look like?

For common css properties like width and height, having vue implicitly assign ‘px’ to the value it would definitely make our code much more cleaner.

This code…

    <div class="d-inline-block" :style="{width}"></div>

will be interpreted as:

    <div class="d-inline-block" :style="{width : width + 'px'}"></div>

[Justineo]

TBH I’m not a fan of this feature. A CSS property can accept multiple value types and even it’s “unitless” today doesn’t mean it will stay “unitless” forever, and vice versa. As the language evolves, maybe someday a “unitless” property can take length units, or those accept length units can take “unitless” values. If a property use to not accept “unitless” values and later changed to accept them, we would never know the true semantics behind a number if we had supported appending px to it by default.

[posva]

Unfortunately, that wouldn’t be consistent and confusing to users