CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Gijo Varghese
Gijo Varghese

Reputation: 11780

How do I bind an inline style?

I've been following the guide: https://v2.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

Upvotes: 6

Views: 8888

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

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.

Upvotes: 10

Related Questions