v-bind:style syntax not working in inline styles

Question

I'm fairly knew to Vue and the whole v-bind thing is throwing me for a loop...

Basically, I'm trying to achieve this syntax, but with Vue's v-bind, since I can't use a variable in an inline CSS style:

<div class="card" style="background-color: {{school.color}}">

Here's my Vue syntax, which I've followed from their documentation, but it's still throwing an error and I can't figure out why? Obviously, it has to be something simple, I just don't fully understand the intricacies of Vue yet!

<div class="card" :style="{ background-color: school.color }">

Any help would be much appreciated!

If I answered your question, then you can click the checkmark beside my answer to mark it as correct ;-) — asemahle
– asemahle, Commented Dec 1, 2016 at 20:31

tony19 · Accepted Answer · 2022-07-15 19:56:20Z

28

For object syntax bindings you are binding an object. Thus, the keys must be valid, and need to be quoted unless they are valid unquoted keys. Dashes - are not allowed in unquoted keys, so it fails to compile.

Either of these options will work:

<div class="card" :style="{ 'background-color': school.color }">

or

<div class="card" :style="{ backgroundColor: school.color }">

edited Jul 15, 2022 at 19:56

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 1, 2016 at 18:51

asemahle

20.8k4 gold badges43 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derek Over a year ago

Ha! That was simple. I've been going crazy trying to figure this out and it's just a simple quotation mark. Thanks so much!

asemahle Over a year ago

No problem! My original explanation wasn't quite right... I've edited it to better explain why the quotes are necessary.

Collectives™ on Stack Overflow

v-bind:style syntax not working in inline styles

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related