Inline Styles Not Working in VueJS

Question

I've been following the guide: https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles for inline css in VueJS. However in some situations, it not working.

:style="{ background: colorSelected }" // working

The following gives an error saying: - invalid expression: :style="{ border-color-left: colorSelected }"

:style="{ border-color-left: colorSelected }" // not working

Answer 1

It's invalid JavaScript syntax for an object literal. The object property needs to have quotes:

:style="{ 'border-left-color': colorSelected }"

or you can specify it like this (Vue-specific):

:style="{ borderLeftColor: colorSelected }"

Also the style is border-left-color not border-color-left.