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

[julian-ca]

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>